<html>
  <head>
    <title>Top Links</title>
    <script id="PageFlakesHelper_v0_Script" type="text/javascript" src="/users/kishore/pageflake.helper.js?v=27"></script>
    <link id="TopLins_Css_v0" type="text/css" rel="stylesheet" href="/users/kishore/toplinks/flake.css"/>
    <script id="TopLinks_JS_v0_Script" type="text/javascript"><![CDATA[
      function TopLinksFlake(id) {
        var instance;
	    var topLinks;
	    var total;
	    var profile;
	    var topLinksEditEl;
	    var displayEl;
	    var openLinksInEl;

	    var ProfileEnum = {
	      TOTAL : "TOTAL",
	      TOPLINKS : "TOPLINKS",
	      OPEN_LINKS_IN : "OPEN_LINKS_IN"
	    };

	    var newTopLink = function (title, url) {
	      return {
	        TITLE : title,
	        URL   : url
	      };
	    };

	    var DisplayEnum = {
	      HIDE : "none",
	      SHOW : ""
	    };

	    this.load = function(obj) {
	      instance = obj;
	      profile = instance.Profiles;

	      instance.setTitle("Top Links");

	      topLinksEditEl = $(id + "topLinksEdit");
	      displayEl = $(id + "display");
	      openLinksInEl = $(id + "open_links_in");

	      topLinks = [];
	      this.setProfileDefault(ProfileEnum.TOTAL, 4);
	      this.setProfileDefault(ProfileEnum.TOPLINKS + "0.URL", "http://www.calendarhub.com");
	      this.setProfileDefault(ProfileEnum.TOPLINKS + "0.TITLE", "CalendarHub");
	      this.setProfileDefault(ProfileEnum.TOPLINKS + "1.URL", "http://www.techcrunch.com/");
	      this.setProfileDefault(ProfileEnum.TOPLINKS + "1.TITLE", "TechCruch");
	      this.setProfileDefault(ProfileEnum.TOPLINKS + "2.URL", "http://community.pageflakes.com/forums/default.aspx");
	      this.setProfileDefault(ProfileEnum.TOPLINKS + "2.TITLE", "Pageflakes Forum");
	      this.setProfileDefault(ProfileEnum.TOPLINKS + "3.URL", "http://www.slashdot.org");
	      this.setProfileDefault(ProfileEnum.TOPLINKS + "3.TITLE", "Slashdot");
	      this.setProfileDefault(ProfileEnum.OPEN_LINKS_IN, "0");

	      this.loadProfile();

	      // Overriding toggleEdit here
	      if(!instance._toggleEdit) {
	        instance._toggleEdit = instance.toggleEdit;
	        instance.toggleEdit = $PageFlakesHelper.bind(function() {
	          this.loadProfile();
	          instance._toggleEdit();
	        }, this);
	      }
	    }

	    this.setProfileDefault = function(key, value) {
	      if(profile[key] == null) {
	        profile[key] = value;
	      }
	    }

	    this.loadProfile = function() {
	      this.loadTopLinks();
	      this.showTopLinks();
	      this.setUpEdit();
	    }

	    this.loadTopLinks = function() {
	      total = profile[ProfileEnum.TOTAL];
	      topLinks = [];
	      for(var i=0; i<total; i++) {
	        topLinks.push(newTopLink(profile[ProfileEnum.TOPLINKS + i + ".TITLE"].replace(/'/g, "&#039;").replace(/"/g, "&#034;"), profile[ProfileEnum.TOPLINKS + i + ".URL"].replace(/'/g, "&#039;").replace(/"/g, "&#034;")));
	      }
	    }

	    this.cancel = function() {
	      instance._toggleEdit();
	    }

	    this.saveProfile = function() {
	      var allTextEls = topLinksEditEl.getElementsByTagName("input");
	      var hasError = false;
	      var count = 0;
	      for(var i=0; i<allTextEls.length; count++,i+=2) {
	        var title = $PageFlakesHelper.trim(allTextEls[i].value);
	        var url = $PageFlakesHelper.trim(allTextEls[i+1].value);

	        var ue = (title != "") && (url == "");
	        var te = (title == "") && (url != "");
	        var error = (te || ue);
	        if(!hasError) {
	          hasError = error;
	        }

	        $(id + count + "te").style.display = te ? DisplayEnum.SHOW : DisplayEnum.HIDE;
	        $(id + count + "ue").style.display = ue ? DisplayEnum.SHOW : DisplayEnum.HIDE;
	      }

	      if(!hasError) {
	        count = 0;
	        var index = 0;
	        for(var i=0; i<allTextEls.length; index++,i+=2) {
	          var title = $PageFlakesHelper.trim(allTextEls[i].value);
	          var url = $PageFlakesHelper.trim(allTextEls[i+1].value);

	          profile[ProfileEnum.TOPLINKS + index + ".TITLE"] = title;
	          profile[ProfileEnum.TOPLINKS + index + ".URL"]   = url;
	          if((title != "") && (url != "")) {
	            count ++;
	          }
	        }
	        profile[ProfileEnum.TOTAL] = count;
	        profile[ProfileEnum.OPEN_LINKS_IN] = openLinksInEl.value;

	        instance.save();
	        instance._toggleEdit();
	        this.loadTopLinks();
	        this.showTopLinks();
	      }
	    }

	    this.setUpEdit = function() {
	      topLinksEditEl.innerHTML = "";
	      for(var i=0; i<topLinks.length; i++) {
	        topLinksEditEl.innerHTML += this.getTopLinkHtml(i, topLinks[i]);
	      }
	      openLinksInEl.value = profile[ProfileEnum.OPEN_LINKS_IN];
	    }

	    this.getTopLinkHtml = function(index, topLink) {
	      var i = (index + 1);
	      var html = "<div style=\"width:100%;border-bottom:1px solid #cccccc;padding:2px 0px 6px 0px;\">";
	      html += "<table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" style=\"table-layout:fixed\"><tr><td style=\"overflow:hidden\"><div style=\"font-weight:bold\" nowrap=\"nowrap\">Link " + i + " Title</div>";
	      html += "<div style=\"padding-right:8px;\"><input type=\"text\" value=\"" + topLink.TITLE + "\" style=\"width:100%;\"/></div>";
	      html += "<div id=\"" + id + index + "te\" style=\"display:none\"><span style=\"color:#ff0000;font-size:1em\">Please enter a title.</span></div>";
	      html += "</td><td style=\"overflow:hidden\">";
	      html += "<div style=\"font-weight:bold;\" nowrap=\"nowrap\">Link " + i + " URL</div>";
	      html += "<div style=\"padding-right:4px\"><input type=\"text\" value=\"" + topLink.URL + "\" style=\"width:100%;\"/></div>";
	      html += "<div id=\"" + id + index + "ue\" style=\"display:none\"><span style=\"padding-left:5px;color:#ff0000;font-size:1em\">Please enter an url.</span></div>";
	      html += "</td></tr></table>";
	      html += "</div>";
	      return html;
	    }

	    this.addMoreTopLinks = function() {
	      topLinksEditEl.innerHTML += this.getTopLinkHtml(total ++, newTopLink("", ""));
	      topLinksEditEl.innerHTML += this.getTopLinkHtml(total ++, newTopLink("", ""));
	    }

	    this.showFavIcon = function(img, url) {
	      var newImage = new Image();
	      newImage.src = url.split("/").splice(0,3).join("/") + "/favicon.ico";
	      newImage.onload = function() {
	        img.onload = null;
	        img.src = newImage.src;
	      }
	    }

	    this.navigate = function(url) {
	      if((url.indexOf("http") != 0) ) {
	        url = "http://" + url;
	      }
	      if(openLinksInEl.value == "0") {
	        window.open(url);
	      } else {
	        window.location.href = url;
	      }
	    }

	    this.showTopLinks = function() {
	      displayEl.innerHTML = "";
	      var onlyOne = (topLinks.length == 1);
	      var html = "<table width=\"100%\" cellpadding=\"4\" cellspacing=\"0\">";
	      for(var i=0; i<topLinks.length; i+=2) {
	        var topLink0 = topLinks[i];
	        var topLink1 = topLinks[i+1];
	        
	        var topLink0URL = topLink0.URL.replace(/&#039;/g, "\\\'").replace(/&#034;/g, "\\\"");
	        var topLink1URL = topLink1.URL.replace(/&#039;/g, "\\\'").replace(/&#034;/g, "\\\"");

	        html += "<tr>";
	        html += "<td width=\"50%\" valign=\"top\"><div style=\"background-color:#eeeeee;\"><div onmouseover=\"this.className='ActiveTopLink'\" onmouseout=\"this.className='InactiveTopLink'\" onclick=\"" + id + ".navigate('" + topLink0URL + "')\"><img src=\"/users/kishore/DeliciousDefaultFavicon.png\" width=\"16\" height=\"16\" align=\"absmiddle\" onload=\"" + id + ".showFavIcon(this, '" + topLink0URL + "')\">&nbsp;&nbsp;<span>" + topLink0.TITLE + "</span></div></td></div>";
	        if(!onlyOne) {
	          html += "<td width=\"50%\" valign=\"top\">";
	          if(typeof(topLink1) != "undefined") {
	            html += "<div style=\"background-color:#eeeeee;\">";
	            html += "<div  onmouseover=\"this.className='ActiveTopLink'\" onmouseout=\"this.className='InactiveTopLink'\" onclick=\"" + id + ".navigate('" + topLink1URL + "')\"><img src=\"/users/kishore/DeliciousDefaultFavicon.png\" width=\"16\" height=\"16\" align=\"absmiddle\" onload=\"" + id + ".showFavIcon(this, '" + topLink1URL + "')\">&nbsp;&nbsp;<span>" + topLink1.TITLE + "</span></div>";
	            html += "</div>";
	          }
	          html += "</td>";
	        }
	        html += "</tr>";
	      }
	      html += "</table>";

	      displayEl.innerHTML = html;
	    }
	  }
    ]]>
    </script>
    <script id="_PAGEFLAKES_Instance" type="text/javascript"><![CDATA[
      var _PAGEFLAKES_ = new TopLinksFlake('_PAGEFLAKES_');
    ]]></script>
  </head>
  <body>
    <div id="_PAGEFLAKES_edit">
      <div id="_PAGEFLAKES_topLinksEdit">
      </div>
      <div>
        <div style="padding:6px 6px 6px 0px;">
          <span style="color:#0000ff;cursor:hand;cursor:pointer;" onclick="_PAGEFLAKES_.addMoreTopLinks()">+ Add more Top Links</span>
        </div>
        <div style="border-top:1px solid #cccccc;padding:6px 0px 6px 0px">
          <span style="font-weight:bold;">Open links in:</span>
          <select id="_PAGEFLAKES_open_links_in">
            <option value="0">new browser window</option>
            <option value="1">this browser window</option>
          </select>
        </div>
        <div><input type="button" value="Save" onclick="_PAGEFLAKES_.saveProfile();"/>&nbsp;<input type="button" value="Cancel" onclick="_PAGEFLAKES_.cancel();"/></div>
      </div>
    </div>
    <div id="_PAGEFLAKES_display"></div>
  </body>
</html>