<html>
  <head>
    <title>
      Flickr
    </title>
    <link id="Flake_v0_Css" rel="stylesheet" type="text/css" href="http://www.pageflakes.com/users/kishore/css/flake.css?v=2"/>
    <script id="PageFlakesHelper_v0_Script" type="text/javascript" src="http://www.geocities.com/senji58/helper.js?v=28"></script>
    <script id="FlickrPhotosFlake_v0_Script" type="text/javascript"><![CDATA[
      function FlickrPhotosFlake_v0(id) {
        var instance;
        var profile;
        var OPTION = "profile-option";
        var INPUT  =  "profile-input";
        var USERNAME = "profile-username";
        var MORE_OPTIONS = "profile-more-options";
        var DISPLAY_OPTION = "profile-display-option";
        var MY_STARRED_PHOTOS = "profile-my-starred-photos";
        var EMPTY  =  "";
        var SHOW = "";
        var HIDE = "none";

        var FLICKR_API_KEY = "67a0bdf6edc20f2cd9a922e4c1afb005";
        var FLICKR_SERVER_URL = "http://static.flickr.com/";
        var FLICKR_PHOTO_URL = "http://www.flickr.com/photos/";
        var photos;
        var pageIndex = 0;
        var photoDisplayElement;
        var photoNavigationElement;
        var moreOptionsElement;
        var moreOptionsTextElement;
        var photoDisplayOptionElement;
        var myStarredPhotosElement;
        var favoritePhotos;

        var shareDivEl;
        var shareLinkEl;
        var shareEl;
        var emailsEl;
        var firstNameEl;
        var personalMessageEl;
        var shareStatusEl;
        var forcedToSinglePhotoView = false;
        var shareTimerID;
        var DEFAULT_SHARE_CLOSE_TIME_OUT = 60000;
        var PHOTO_SHARING_TEMPLATE = "FlickrTemplate";
        var PHOTO_SHARE_EMAIL_MESSAGE = "FLICKR_SHARE_EMAIL_MESSAGE";
        var ContentTypeEnum = {
          TEXT : 0,
          HTML : 1
        };

        var prev;
        var next;
        var IMG_SRC_REGEXP = /img src=\"((.|\.)*?)\"/;
        var URL_REGEXP = /a href=\"((.|\.)*?)\"/;
        var STARTS_WITH_HTTP_REGEXP = /^http:\/\//;
        var FAV_IMG_SRC_REGEXP = /^http:\/\/static\.flickr\.com\/((.|\.)*?)_(m|s)\.jpg$/;
        var IMG_ID_REGEXP = /^.*\/(.*?)_.*$/;

        var PhotoOptionEnum = {
          MOST_RECENT             : "most_recent",
          INTERESTING             : "interesting",
          MY_STARRED_PHOTOS       : "my_starred_photos",
          ENTER_TAG               : "enter_tag",
          PHOTOS_FROM_FLICKR_USER : "photos_from_flickr_user",
          THIS_FLICKR_FEED        : "this_flickr_feed"
        };

        var PhotoDisplayOptionEnum = {
          TILED  : "0",
          SINGLE : "1"
        };

        var FavoritePhotoEnum = {
          STARRED : "/users/kishore/flickr/images/starred.gif",
          UNSTARRED : "/users/kishore/flickr/images/notstarred.gif"
        };

        var FavoritePhotoTitleEnum = {
          STARRED : "Click to mark as favorite",
          UNSTARRED : "Click to un-mark as favorite"
        };

        var ELS;

        var Photo = function(src, title, flickrUrl) {
          this.src = src;
          this.title = title;
          this.flickrUrl = flickrUrl;
        };

        var FlickrUrlEnum = {
          MOST_RECENT             : "http://www.flickr.com/services/rest/?method=flickr.photos.getRecent&api_key=" + FLICKR_API_KEY,
          INTERESTING             : "http://www.flickr.com/services/rest/?method=flickr.interestingness.getList&api_key=" + FLICKR_API_KEY,
          ENTER_TAG               : "http://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=" + FLICKR_API_KEY + "&tags=",
          FIND_BY_USERNAME        : "http://www.flickr.com/services/rest/?method=flickr.people.findByUsername&api_key=" + FLICKR_API_KEY + "&username=",
          FIND_BY_EMAIL           : "http://www.flickr.com/services/rest/?method=flickr.people.findByEmail&api_key=" + FLICKR_API_KEY + "&find_email=",
          PHOTOS_FROM_FLICKR_USER : "http://www.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&api_key=" + FLICKR_API_KEY + "&user_id="
        };

        this.load = function(flakeInstance) {
          instance = flakeInstance;
          profile = instance.Profiles;

          //set up defaults
          this.setProfileDefault(OPTION, PhotoOptionEnum.INTERESTING);
          this.setProfileDefault(INPUT, EMPTY);
          this.setProfileDefault(MORE_OPTIONS, HIDE);
          this.setProfileDefault(USERNAME, EMPTY);
          this.setProfileDefault(DISPLAY_OPTION, PhotoDisplayOptionEnum.TILED);
          this.setProfileDefault(MY_STARRED_PHOTOS, "{}");

          photoDisplayElement = $(id + "photo_display");
          photoNavigationElement = $(id + "photo_navigation");
          moreOptionsElement = $(id + "more_options");
          moreOptionsTextElement = $(id + "more_options_text");
          photoDisplayOptionElement = $(id + "display");
          myStarredPhotosElement = $(id + "my_starred_photos_tr");

          shareDivEl = $(id + "share_div");
          shareLinkEl = $(id + "share_link");
          shareEl = $(id + "share");
          emailsEl = $(id + "emails");
          firstNameEl = $(id + "sfn");
          personalMessageEl = $(id + "pm");
          shareStatusEl = $(id + "ss");

          prev = $(id + "photo_navigation_prev");
          next = $(id + "photo_navigation_next");

          ELS = {};
          for(var key in PhotoOptionEnum) {
            var v = PhotoOptionEnum[key];
            ELS[v] = {RADIO : $(id + v), INPUT : $(id + v + "_text"), ERROR : $(id + v + "_error"), DEFAULT_ERROR : this.getDefaultErrorMessage(v)};
          }

          for(var key in ELS) {
            var els = ELS[key];
            if(mz) {
              els.RADIO.style.margin = "4px 4px 0px 0px";
            } else {
              els.RADIO.style.margin = "0px 0px 0px -4px";
            }
          }

          $PageFlakesHelper.addRefreshLink(id, "displayPhotos");
          this.loadProfile();
          this.displayPhotos();

          // Overriding toggleEdit here
          if(!instance._toggleEdit) {
            instance._toggleEdit = instance.toggleEdit;
            instance.toggleEdit = $PageFlakesHelper.bind(function() {
              this.loadProfile();
              shareDivEl.style.position = "relative";
              instance._toggleEdit();
              shareDivEl.style.position = "absolute";
            }, this);
          }
        }

        this.setProfileDefault = function(key, defaultValue) {
          if(profile[key] == null) {
            profile[key] = defaultValue;
          }
        }

        this.getDefaultErrorMessage = function(v) {
          if(v == PhotoOptionEnum.ENTER_TAG) {
            return "Please enter a tag.";
          } else if(v == PhotoOptionEnum.PHOTOS_FROM_FLICKR_USER) {
            return "Please enter an user.";
          } else if(PhotoOptionEnum.THIS_FLICKR_FEED) {
            return "Please enter a Flickr feed.";
          }
        }

        this.setTitle = function(ro) {
          var title = "";
          if (ro == PhotoOptionEnum.INTERESTING) {
            title = "Flickr : Interesting photos";
          } else if (ro == PhotoOptionEnum.MOST_RECENT) {
            title = "Flickr : Most recent photos";
          } else if (ro == PhotoOptionEnum.ENTER_TAG) {
            title = "Flickr : Photos tagged with " + profile[INPUT];
          } else if (ro == PhotoOptionEnum.PHOTOS_FROM_FLICKR_USER) {
            title = "Flickr : Photos for user " + profile[INPUT];
          } else if (ro == PhotoOptionEnum.MY_STARRED_PHOTOS) {
            title = "Flickr : My starred photos";
          } else {
            title = "Flickr : Public photos";
          }
          instance.setTitle(title);
        }

        this.showImageSmoothly = function(imgObject) {
          var OPACITY = {IMG : imgObject};
          var timerid = setInterval(function() {
            try {
              var count = mz ? (OPACITY.IMG.style.MozOpacity * 100) : OPACITY.IMG.filters.alpha.opacity;
              count += 5;
              if(count <= 100) {
                if(mz) {
                  OPACITY.IMG.style.MozOpacity = (count/100);
                } else {
                  OPACITY.IMG.filters.alpha.opacity = count;
                }
              } else {
                clearInterval(OPACITY.TIMER);
              }
            } catch (e) {
            }
          }, 25);
          OPACITY.TIMER = timerid;
        }

        this.loadProfile = function() {

          var ro = profile[OPTION];

          this.clearAll();
          this.setTitle(ro);
          moreOptionsElement.style.display = profile[MORE_OPTIONS];
          this.setMoreOptionsText();
          for(var key in ELS) {
            var inputElement = ELS[key].INPUT;
            if(key == ro) {
              ELS[key].RADIO.checked = true;
              if(inputElement) {
                inputElement.disabled = false;
                inputElement.style.backgroundColor = "#ffffff";
                inputElement.value = profile[INPUT];
              }
            } else {
              if(inputElement) {
                inputElement.disabled = true;
                inputElement.style.backgroundColor = "#d4d2cc";
              }
            }
          }
          photoDisplayOptionElement.value = profile[DISPLAY_OPTION];
          favoritePhotos = eval( "(" + profile[MY_STARRED_PHOTOS] + ")");
          myStarredPhotosElement.style.display = this.hasFavorites() ? SHOW : HIDE;
        }

        this.toggleMoreOptions = function() {
          moreOptionsElement.style.display = (moreOptionsElement.style.display == SHOW) ? HIDE : SHOW;
          this.setMoreOptionsText();
        }

        this.setMoreOptionsText = function() {
          moreOptionsTextElement.innerHTML = (moreOptionsElement.style.display == SHOW) ? "Less options" : "More options";
        }

        this.clearAll = function() {
          for(var elKey in ELS) {
            var el = ELS[elKey];
            el.RADIO.checked = false;
            var inputElement = el.INPUT;
            if(inputElement) {
              inputElement.value = EMPTY;
            }
            var errorElement = el.ERROR;
            if(errorElement) {
              errorElement.style.display = HIDE;
            }
          }
        }

        this.clearErrors = function() {
          for(var elKey in ELS) {
            var el = ELS[elKey];
            var errorElement = el.ERROR;
            if(errorElement) {
              errorElement.style.display = HIDE;
            }
            if(el.RADIO.checked) {
              if(el.INPUT) {
                el.INPUT.disabled = false;
                el.INPUT.style.backgroundColor = "#ffffff";
              }
            } else {
              if(el.INPUT) {
                el.INPUT.disabled = true;
                el.INPUT.style.backgroundColor = "#d4d2cc";
              }
            }
          }
        }

        this.saveProfile = function() {
          var noErrors = true;
          var radioValue;
          var inputValue = "";
          var selectedEl;
          for(var elKey in ELS) {
            var el = ELS[elKey];
            if(Boolean(el.RADIO.checked)) {
              selectedEl = el;
              radioValue = el.RADIO.value;
              if(el.INPUT) {
                inputValue = el.INPUT.value;
                if($PageFlakesHelper.trim(inputValue) == EMPTY) {
                  noErrors = false;
                  el.ERROR.innerHTML = el.DEFAULT_ERROR;
                  el.ERROR.style.display = "";
                }
              }
              break;
            }
          }
          if(noErrors) {
            if(radioValue == PhotoOptionEnum.PHOTOS_FROM_FLICKR_USER) {
              var findUser = (inputValue.indexOf("@") == -1) ? FlickrUrlEnum.FIND_BY_USERNAME : FlickrUrlEnum.FIND_BY_EMAIL;
              App.ContentProxy.GetUrl(findUser + inputValue, $PageFlakesHelper.bind(function(details) {
                var xmlDoc = $PageFlakesHelper.getXmlDoc(details);
                var anyErrors = xmlDoc.getElementsByTagName("err");
                if((typeof(anyErrors) != "undefined") && (anyErrors.length > 0)) {
                  var errorMessage = anyErrors[0].getAttribute("msg");
                  selectedEl.ERROR.innerHTML = errorMessage;
                  selectedEl.ERROR.style.display = "";
                } else {
                  profile[OPTION] = radioValue;
                  profile[INPUT] = inputValue;
                  profile[MORE_OPTIONS] = moreOptionsElement.style.display;
                  profile[DISPLAY_OPTION] = photoDisplayOptionElement.value;
                  this.setTitle(profile[OPTION]);
                  profile[USERNAME] = xmlDoc.getElementsByTagName("user")[0].getAttribute("nsid");
                  forcedToSinglePhotoView = false;
                  instance.save();
                  this.closeShare();
                  instance._toggleEdit();
                  this.displayPhotos();
                }
              }, this));
            } else {
              profile[OPTION] = radioValue;
              profile[INPUT] = inputValue;
              profile[MORE_OPTIONS] = moreOptionsElement.style.display;
              profile[DISPLAY_OPTION] = photoDisplayOptionElement.value;
              this.setTitle(profile[OPTION]);
              forcedToSinglePhotoView = false;
              instance.save();
              this.closeShare();
              instance._toggleEdit();
              this.displayPhotos();
            }
          }
        }

        this.resetPageCounter = function() {
          pageIndex = 0;
        }

        this.incrementPageCounterAndDisplayPhoto = function() {
          pageIndex ++;
          this.displayCurrentPagePhotos();
        }

        this.decrementPageCounterAndDisplayPhoto = function() {
          pageIndex --;
          this.displayCurrentPagePhotos();
        }

        this.setStatusMessage = function(message, color) {
          color = typeof(color) == "undefined" ? "#000000" : color;
          photoDisplayElement.innerHTML = "<div style=\"color:" + color + ";position:relative;top:105px;\"align=\"center\" valign=\"middle\">" + message + "</div>";
        }

        this.showFavoriteOption = function(divEl, pageIndex) {
          var allDivs = divEl.getElementsByTagName("div");
          var favoriteElement;
          if(allDivs.length == 0) {
            var photo = photos[pageIndex];
            var favorite = false;
            var imageSrc = photo.src.match(FAV_IMG_SRC_REGEXP)[1];
            var imageId = imageSrc.match(IMG_ID_REGEXP)[1];
            var userId = photo.flickrUrl.substring(FLICKR_PHOTO_URL.length);
            userId = userId.substring(0, userId.indexOf("/"));
            if(favoritePhotos[imageId]) {
              favorite = true;
            }
            var params = {
              IMAGESOURCE : imageSrc,
              TITLE : photo.title,
              USERID : userId,
              IMAGEID : imageId
            };
            var single = (profile[DISPLAY_OPTION] == PhotoDisplayOptionEnum.SINGLE);
            var favoritesImgElement = $PageFlakesHelper.newNode("img");
            favoritesImgElement.src = (favorite) ? FavoritePhotoEnum.STARRED : FavoritePhotoEnum.UNSTARRED;
            favoritesImgElement.title = (favorite) ? FavoritePhotoTitleEnum.UNSTARRED : FavoritePhotoTitleEnum.STARRED;
            favoriteElement = $PageFlakesHelper.newNode("div");
            favoriteElement.style.position = "absolute";
            favoriteElement.style.zIndex = 1000;
            favoriteElement.style.top = "-8px";
            favoriteElement.style.right = "-8px";
            favoriteElement.style.cursor = "hand";
            favoriteElement.style.cursor = "pointer";
            if(favoriteElement.addEventListener) {
              favoriteElement.addEventListener("click", $PageFlakesHelper.bind(function(event){ this.updateFavorite(favoritesImgElement, params);}, this), false);
            } else if (favoriteElement.attachEvent) {
              favoriteElement.attachEvent("onclick", $PageFlakesHelper.bind(function(event){ this.updateFavorite(favoritesImgElement, params);}, this));
            }
            favoriteElement.appendChild(favoritesImgElement);
            divEl.appendChild(favoriteElement);
          } else {
            favoriteElement = allDivs[0];
          }
          favoriteElement.style.display = SHOW;
        }

        this.hideFavoriteOption = function(divEl) {
          var favoriteElement = divEl.getElementsByTagName("div")[0];
          favoriteElement.style.display = HIDE;
        }

        this.updateFavorite = function(favoritesImgElement, params) {
          var favorite = (favoritePhotos[params.IMAGEID] != null);
          favoritesImgElement.src = (favorite) ? FavoritePhotoEnum.UNSTARRED : FavoritePhotoEnum.STARRED;
          favoritesImgElement.title = (favorite) ? FavoritePhotoTitleEnum.STARRED : FavoritePhotoTitleEnum.UNSTARRED;
          favoritePhotos[params.IMAGEID] = (favorite) ? null : {S : params.IMAGESOURCE, T : params.TITLE.replace(/'/g, "&#039;").replace(/"/g, "&#034;"), U : params.USERID};
          profile[MY_STARRED_PHOTOS] = this.mapOfMapsToString(favoritePhotos);
          instance.save();
          if(profile[OPTION] == PhotoOptionEnum.MY_STARRED_PHOTOS) {
            photos = this.getFavoritePhotos();
            var single = (profile[DISPLAY_OPTION] == PhotoDisplayOptionEnum.SINGLE);
            var npp = single ? 1 : 9;
            if(photos.length <= pageIndex * npp) {
              pageIndex --;
            }
            this.showPhotos("No starred photos found.");
          }
        }

        this.hasFavorites = function() {
          for(var key in favoritePhotos) {
            return true;
          }
          return false;
        }

        this.getFavoritePhotos = function() {
          var small = (profile[DISPLAY_OPTION] == PhotoDisplayOptionEnum.TILED);
          var p = [];
          for(var photoId in favoritePhotos) {
            var map = favoritePhotos[photoId];
            if(map) {
              p.push(new Photo((FLICKR_SERVER_URL + map.S + (small ? "_s.jpg" : "_m.jpg")), map.T, (FLICKR_PHOTO_URL + map.U + "/" + photoId)));
            }
          }
          return p;
        }

        this.mapToString = function(map) {
          var str = "{";
          for(var key in map) {
            if(map[key]) {
              str += key + ":'" + map[key] + "',";
            }
          }
          str = str.substring(0, str.length-1);
          str += "}";
          return str;
        }

        this.mapOfMapsToString = function(map) {
          var str = "{";
          for(var key in map) {
            if(map[key]) {
              str += key + ":" + this.mapToString(map[key]) + ",";
            }
          }
          if(str.length > 1) {
            str = str.substring(0, str.length-1);
          }
          str += "}";
          return str;
        }

        this.displayPhotos = function() {
          photoNavigationElement.style.display = HIDE;
          this.setStatusMessage("<img src=\"indicator.gif\" align=\"absmiddle\"><span style=\"padding-left:5px;\">Loading photos ...</span>");
          this.resetPageCounter();
          var ro = profile[OPTION];
          var flickrUrl = "";
          var small = (profile[DISPLAY_OPTION] == PhotoDisplayOptionEnum.TILED);
          var userFeed = false;
          if(ro != PhotoOptionEnum.MY_STARRED_PHOTOS) {
            if(ro == PhotoOptionEnum.MOST_RECENT) {
              flickrUrl = FlickrUrlEnum.MOST_RECENT;
            } else if(ro == PhotoOptionEnum.INTERESTING) {
              flickrUrl = FlickrUrlEnum.INTERESTING;
            } else if(ro == PhotoOptionEnum.ENTER_TAG) {
              var tags = $PageFlakesHelper.trim(ELS[PhotoOptionEnum.ENTER_TAG].INPUT.value).split(" ");
              flickrUrl = FlickrUrlEnum.ENTER_TAG + tags.join(",");
            } else if(ro == PhotoOptionEnum.PHOTOS_FROM_FLICKR_USER) {
              var username = profile[USERNAME];
              flickrUrl = FlickrUrlEnum.PHOTOS_FROM_FLICKR_USER + username;
            } else if(ro == PhotoOptionEnum.THIS_FLICKR_FEED) {
              flickrUrl = $PageFlakesHelper.trim(ELS[PhotoOptionEnum.THIS_FLICKR_FEED].INPUT.value);
              var startsWithHttpMatch = flickrUrl.match(STARTS_WITH_HTTP_REGEXP, "/i");
              if(!startsWithHttpMatch) {
                flickrUrl = "http://" + flickrUrl;
              }
              userFeed = true;
            }

            App.ContentProxy.GetUrl(flickrUrl, $PageFlakesHelper.bind(function(details) {
              var xmlDoc = $PageFlakesHelper.getXmlDoc(details);
              photos = [];

              if(!userFeed) {
                var photoElements = xmlDoc.getElementsByTagName("photo");
                $PageFlakesHelper.foreach(photoElements, function(photoElement){
                  photos.push(new Photo(
                    FLICKR_SERVER_URL + photoElement.getAttribute("server") + "/" + photoElement.getAttribute("id") + "_" + photoElement.getAttribute("secret") + (small ? "_s.jpg" : "_m.jpg"),
                    photoElement.getAttribute("title"),
                    FLICKR_PHOTO_URL + photoElement.getAttribute("owner") + "/" + photoElement.getAttribute("id")
                  ));
                });
              } else {
                var isRss = xmlDoc.getElementsByTagName("channel").length != 0;
                var isFeed = xmlDoc.getElementsByTagName("feed").length != 0;
                if(isRss) {
                  var items = xmlDoc.getElementsByTagName("item");
                  $PageFlakesHelper.foreach(items, function(itemXml) {
                    var description = itemXml.getElementsByTagName("description")[0].firstChild.nodeValue;
                    var match = description.match(IMG_SRC_REGEXP);
                    if(match) {
                      photos.push(new Photo(
                        (small ? match[1].replace(/_m.jpg/, "_s.jpg") : match[1]),
                        itemXml.getElementsByTagName("title")[0].firstChild.nodeValue,
                        description.replace(URL_REGEXP, EMPTY).match(URL_REGEXP)[1]
                      ));
                    }
                  });
                } else if(isFeed){
                  var entries = xmlDoc.getElementsByTagName("entry");
                  $PageFlakesHelper.foreach(entries, function(entryXml) {
                    var content = entryXml.getElementsByTagName("content")[0].firstChild.nodeValue;
                    var match = content.match(IMG_SRC_REGEXP);
                    if(match) {
                      photos.push(new Photo(
                        (small ? match[1].replace(/_m.jpg/, "_s.jpg") : match[1]),
                        entryXml.getElementsByTagName("title")[0].firstChild.nodeValue,
                        content.replace(URL_REGEXP, EMPTY).match(URL_REGEXP)[1]
                      ));
                    }
                  });
                }
              }

              this.showPhotos();
            }, this),


            $PageFlakesHelper.bind(function() {
              if((ro == PhotoOptionEnum.THIS_FLICKR_FEED)) {
                this.setStatusMessage("Error occurred while loading feed from <a href=\"" + flickrUrl + "\">" + flickrUrl + "</a>");
              } else {
                this.setStatusMessage("Error occurred while loading photos.");
              }
            },this));
          } else {
            photos = this.getFavoritePhotos();
            this.showPhotos("No starred photos found.");
          }
        }

        this.showPhotos = function(message) {
          this.displayCurrentPagePhotos(message);
          if(photos.length > 0) {
            photoNavigationElement.style.display = SHOW;
          }
        }

        this.getPhotoHtml = function(pageIndex) {
          //return "<a href=\"" + photos[pageIndex].flickrUrl + "\" target=\"_blank\"><img src=\"" + photos[pageIndex].src + "\" title=\"" + photos[pageIndex].title + "\" style=\"filter:alpha(opacity=0);-moz-opacity:0.0\" onload=\"_PAGEFLAKES_.showImageSmoothly(this)\" border=\"0\"></a>";
          return "<div style=\"position:relative\" onmouseover=\"" + id + ".showFavoriteOption(this, " + pageIndex + ")\" onmouseout=\"" + id + ".hideFavoriteOption(this)\"><a href=\"" + photos[pageIndex].flickrUrl + "\" target=\"_blank\"><img src=\"" + photos[pageIndex].src + "\" title=\"" + photos[pageIndex].title.replace(/"/g, "&#034;") + "\" style=\"filter:alpha(opacity=0);-moz-opacity:0.0\" onload=\"_PAGEFLAKES_.showImageSmoothly(this)\" border=\"0\"></a></div>";
        }

        this.displayCurrentPagePhotos = function(message) {
          var single = (profile[DISPLAY_OPTION] == PhotoDisplayOptionEnum.SINGLE);
          var npp = single ? 1 : 9;
          if(photos.length > 0) {
            if(((pageIndex + 1) * npp) >= photos.length) {
              next.style.display = HIDE;
            } else {
              next.style.display = SHOW;
            }
            if(pageIndex <= 0) {
              prev.style.display = HIDE;
            } else {
              prev.style.display = SHOW;
            }
            if(single) {
              photoDisplayElement.innerHTML = "<table cellpadding=\"6\"><tr><td valign=\"middle\">" + this.getPhotoHtml(pageIndex) + "</td></tr></table>";
            } else {
              var html = "<table cellpadding=\"6\">";
              var count = pageIndex * npp;
              for(var i=0; i < 3; i++) {
                html += "<tr height=\"75px\">";
                for(var j=0; j < 3; j++) {
                  html += "<td width=\"75px\">";
                  if(count < photos.length) {
                    html += this.getPhotoHtml(count++);
                  } else {
                    next.style.display = HIDE;
                    html += "&nbsp;";
                  }
                  html += "</td>";
                }
                html += "</tr>";
              }
              html += "</table>";
              photoDisplayElement.innerHTML = html;
            }
          } else {
            this.setStatusMessage(message ? message : "No photos found.");
          }
        }

        this.showShare = function() {
          if(shareTimerID != 0) {
            window.clearTimeout(shareTimerID);
          }
          if(shareEl.style.display == HIDE) {
            var single = (profile[DISPLAY_OPTION] == PhotoDisplayOptionEnum.SINGLE);

            if(!single) {
              profile[DISPLAY_OPTION] = PhotoDisplayOptionEnum.SINGLE;
              forcedToSinglePhotoView = true;
              this.displayPhotos();
            }

            shareLinkEl.innerHTML = "Close Share";
            emailsEl.value = firstNameEl.value = EMPTY;
            personalMessageEl.value = "This photo is awesome!";
            shareEl.style.display = SHOW;
            emailsEl.focus();
          } else {
            if(forcedToSinglePhotoView) {
              profile[DISPLAY_OPTION] = PhotoDisplayOptionEnum.TILED;
              forcedToSinglePhotoView = false;
              window.setTimeout(id + ".displayPhotos()", 25);
            }
            shareLinkEl.innerHTML = "Share";
            shareEl.style.display = HIDE;
            shareStatusEl.style.display = HIDE;
          }
        }

        this.closeShare = function() {
          shareLinkEl.innerHTML = "Share";
          shareEl.style.display = HIDE;
          shareStatusEl.innerHTML = EMPTY;
          shareStatusEl.style.display = HIDE;
        }

        this.sendPhotoShareEmail = function() {
          var email = $PageFlakesHelper.trim(emailsEl.value);
          shareStatusEl.style.display = HIDE;
          shareStatusEl.innerHTML = EMPTY;
          var emails = ((email.split("\n")).join(",")).split(",");
          if((email != EMPTY) && this.validEmails(emails)) {
            this.sendFlickrShareEmails(emails);
            if(shareTimerID != 0) {
              window.clearTimeout(shareTimerID);
            }
            shareTimerID = window.setTimeout(id + ".closeShare()", DEFAULT_SHARE_CLOSE_TIME_OUT);
            emailsEl.focus();
          } else {
            shareStatusEl.innerHTML = "<table cellpadding=\"2\"><tr><td width=\"1%\"><div style=\"padding-right:8px\"><img src=\"/users/kishore/flickr/images/failure.gif\"/></div></td><td><div style=\"font-weight:bold;color:#c00000\">Your photo could not been sent.</div><div>Please make sure that you enter a valid email address and try again.</div></td></tr></table>";
            shareStatusEl.style.display = SHOW;
          }
        }

        this.encodeURI = function(uri) {
          if(window.encodeURIComponent) {
            return encodeURIComponent(uri);
          } else {
            return uri;
          }
        }

        this.isValidEmail = function(email) {
          if(email != null) {
           var indexOfAt = email.indexOf("@");
            if((indexOfAt != -1) && (indexOfAt != 0)) {
              var indexOfDot = email.indexOf(".", (indexOfAt + 1));

              return (indexOfDot != -1) && (indexOfDot != (indexOfAt + 1));
            }
          }

          return false;
        }

        this.validEmails = function(emails) {
          for(var i=0; i < emails.length; i++) {
            var validEmail = this.isValidEmail(emails[i]);
            if(!validEmail) {
              return false;
            }
          }
          return true;
        }

        this.sendFlickrShareEmails = function(emails) {

          var firstName = firstNameEl.value;
          var personalMessage = personalMessageEl.value;
          var photo = photos[pageIndex];
          var flickrUrl = photo.flickrUrl;
          var src = photo.src;

          personalMessage = personalMessage.replace(/</g, "&lt;").replace(/>/g, "&gt;");
          personalMessageEl.value = personalMessage;
          personalMessage = personalMessage.replace(/(\r\n|\n)/gi, "<br>");

          var photoViewerFlakeUrl = "http://www.pageflakes.com/users/kishore/photoviewer/flake.aspx";
          photoViewerFlakeUrl += "?url=" + this.encodeURI(src) + "&flake=flickr&u=" + this.encodeURI(flickrUrl);
          photoViewerFlakeUrl = "http://www.pageflakes.com/AddFlake.aspx?v=52&url=" + this.encodeURI(photoViewerFlakeUrl);

          var html = "<div style=\"padding-top:5px\">";
          html += "<div style=\"padding-top:20px\">";
          html += "<span>Hello</span>";
          html += "<span style=\"padding-left:4px\">#{EMAIL_ADDRESS},</span>";
          html += "</div>";
          html += "<div style=\"padding-top:15px\">";
          html += "<span style=\"font-weight:bold\">" ;
          html += ((firstName != EMPTY) ? firstName : "A Pageflakes user") + " wants to share the following photo with you:";
          html += "</span>";
          html += "</div>";
          html += "<div style=\"padding-top:10px\">";
          html += "<div style=\"width:75px;border:1px solid #999999;padding:4px 4px 4px 4px\">";
          html += "<span>";
          html += "<a href=\"";
          html += photoViewerFlakeUrl;
          html += "\">";
          html += "<img src=\"" + src.replace(/_m.jpg$/, "_s.jpg") + "\" border=\"0\">";
          html += "</a>";
          html += "</span>";
          html += "</div>";
          html += "</div>";
          html += "<div style=\"padding-top:15px\">";
          html += "<span>";
          html += "<a href=\"";
          html += photoViewerFlakeUrl;
          html += "\">";
          html += "Click to see the original and larger version";
          html += "</a>";
          html += "</span>";
          html += "</div>";
          if(personalMessage != EMPTY) {
            html += "<div>";
            html += "<div style=\"padding-top:15px\">";
            html += "<span style=\"font-weight:bold\">";
            html += "Personal Message:";
            html += "</span>";
            html += "</div>";
            html += "<div style=\"padding-top:5px\">";
            html += "<span>";
            html += personalMessage;
            html += "</span>";
            html += "</div>";
            html += "</div>";
          }
          html += "<div style=\"padding-top:25px\">";
          html += "<span>";
          html += "Pageflakes - The whole Web at your fingertips";
          html += "</span>";
          html += "</div>";
          html += "<div style=\"padding-top:5px\">";
          html += "<span>";
          html += "<a href=\"http://www.pageflakes.com\">www.pageflakes.com</a>"
          html += "</span>";
          html += "</div>";
          html += "</div";
          html += "</div>";

          var subject = " wants to share a photo with you";
          var from = "<info@pageflakes.com>";

          if(firstName != EMPTY) {
            subject = firstName + subject;
            from = "\"" + firstName + "\"" + from;
          } else {
            subject = "Someone" + subject;
            from = "\"Pageflakes\"" + from;
          }

          for(var i=0; i < emails.length ;i++) {
            var email = emails[i];
            var params = [[PHOTO_SHARE_EMAIL_MESSAGE, html.replace(/#{EMAIL_ADDRESS}/, email)]];

            var emailMessage = html.replace(/#{EMAIL_ADDRESS}/, email);
            App.Server.SendEmails(from, [email], subject, PHOTO_SHARING_TEMPLATE, ContentTypeEnum.HTML, params, function(details) {
            });
          }

          shareStatusEl.innerHTML = "<table cellpadding=\"2\"><tr><td width=\"1%\"><div style=\"padding-right:8px\"><img src=\"/users/kishore/flickr/images/success.gif\"/></div></td><td><div style=\"font-weight:bold;color:#333333\">Your photo has been sent.</div><div>Feel free to send more photos.</div></td></tr></table>";
          shareStatusEl.style.display = SHOW;
        }
      }
    ]]></script>
    <script id="_PAGEFLAKES_Instance" type="text/javascript"><![CDATA[
      var _PAGEFLAKES_ = new FlickrPhotosFlake_v0('_PAGEFLAKES_');
    ]]></script>
  </head>
  <body>
    <div id="_PAGEFLAKES_edit" width="100%">
      <table width="100%" cellpadding="4">
        <tr>
          <td width="5%" valign="top">
            <b>Show:</b>
          </td>
          <td valign="top">
            <table cellpadding="1" cellspacing="0">
              <tr>
                <td>
                  <input id="_PAGEFLAKES_interesting" type="radio" name="_PAGEFLAKES_radio_group" onclick="_PAGEFLAKES_.clearErrors()" value="interesting"/>
                </td>
                <td>
                  Interesting
                </td>
              </tr>
              <tr>
                <td width="1%">
                  <input id="_PAGEFLAKES_most_recent" type="radio" name="_PAGEFLAKES_radio_group" onclick="_PAGEFLAKES_.clearErrors()" value="most_recent"/>
                </td>
                <td width="99%">
                  Most recent
                </td>
              </tr>
              <tr id="_PAGEFLAKES_my_starred_photos_tr" style="display:none">
                <td width="1%">
                  <input id="_PAGEFLAKES_my_starred_photos" type="radio" name="_PAGEFLAKES_radio_group" onclick="_PAGEFLAKES_.clearErrors()" value="my_starred_photos"/>
                </td>
                <td width="99%">
                  My starred photos
                </td>
              </tr>
              <tr>
                <td colspan="2" valign="top">
                  <div id="_PAGEFLAKES_more_options">
                    <table width="100%" cellpadding="1" cellspacing="0">
                      <tr>
                        <td width="1%" valign="top">
                          <input id="_PAGEFLAKES_enter_tag" type="radio" name="_PAGEFLAKES_radio_group" onclick="_PAGEFLAKES_.clearErrors()" value="enter_tag"/>
                        </td>
                        <td valign="top"><div>Enter tag</div>
                          <div><input id="_PAGEFLAKES_enter_tag_text" type="text" size="25"/></div>
                          <span id="_PAGEFLAKES_enter_tag_error" style="display:none;color:#ff0000;font-size:-2"></span>
                          <div><font size="-2">e.g. colorful, nature, people</font></div>
                        </td>
                      </tr>
                      <tr>
                        <td valign="top">
                          <input id="_PAGEFLAKES_photos_from_flickr_user" type="radio" name="_PAGEFLAKES_radio_group" onclick="_PAGEFLAKES_.clearErrors()" value="photos_from_flickr_user"/>
                        </td>
                        <td valign="top">
                          <div>Photos from this Flickr user:</div>

                          <div><input id="_PAGEFLAKES_photos_from_flickr_user_text" type="text" size="25"/></div>
                          <span id="_PAGEFLAKES_photos_from_flickr_user_error" style="display:none;color:#ff0000;font-size:-2"></span>
                          <div><font size="-2">e.g. Edgar Yang or user@example.com</font></div>
                        </td>
                      </tr>
                      <tr>
                        <td valign="top">
                          <input id="_PAGEFLAKES_this_flickr_feed" type="radio" name="_PAGEFLAKES_radio_group" onclick="_PAGEFLAKES_.clearErrors()" value="this_flickr_feed"/>
                        </td>

                        <td valign="top">
                          <div>This Flickr feed(URL):</div>
                          <div><input id="_PAGEFLAKES_this_flickr_feed_text" type="text" size="25"/></div>
                          <span id="_PAGEFLAKES_this_flickr_feed_error" style="display:none;color:#ff0000;font-size:-2"></span></span>
                        </td>
                      </tr>
                    </table>
                  </div>
                  <span id="_PAGEFLAKES_more_options_text" style="padding-left:5px;cursor:hand;cursor:pointer;font-size:-2;color:#0000ff;text-decoration:underline" onclick="_PAGEFLAKES_.toggleMoreOptions()"></span>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td>
            <b>Display:<b>
          </td>
          <td style="padding-left:10px">
            <select id="_PAGEFLAKES_display">
              <option value="0">Tiled (3 x 3)</option>
              <option value="1">Single photo</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>
            &nbsp;
          </td>
          <td>
            <table width="100%" cellpadding="1" cellspacing="0">
              <tr>
                <td colspan="2"><div style="padding-left:5px"><input id="_PAGEFLAKES_save" type="button" onclick="_PAGEFLAKES_.saveProfile();" value="Save"/></div>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>
    <div id="_PAGEFLAKES_photo_display" style="padding-top:5px;height:270px; overflow:hidden" align="center">
    </div>
    <div id="_PAGEFLAKES_photo_navigation" align="center" style="padding-top:2px">
      <table cellpadding="1" width="100%"><tr><td width="50%" align="right" valign="top"><img id="_PAGEFLAKES_photo_navigation_empty" src="/users/kishore/flickr/images/empty.gif" border="0"/><img id="_PAGEFLAKES_photo_navigation_prev" src="/users/kishore/previous.gif" border="0" style="cursor:hand;cursor:pointer" onclick="_PAGEFLAKES_.decrementPageCounterAndDisplayPhoto()"></td><td width="40%" align="left" valign="top"><img id="_PAGEFLAKES_photo_navigation_next" src="/users/kishore/next.gif" border="0" style="cursor:hand;cursor:pointer" onclick="_PAGEFLAKES_.incrementPageCounterAndDisplayPhoto()"></td><td width="10%" nowrap="nowrap" valign="top"><div style="position:relative"><div id="_PAGEFLAKES_share_div" style="position:absolute;top:-5px;right:5px;"><span id="_PAGEFLAKES_share_link" class="NavigateActive" onmouseout="$PageFlakesHelper.setClassName(this, 'NavigateActive');" onmouseover="$PageFlakesHelper.setClassName(this, 'NavigateHover');" onclick="_PAGEFLAKES_.showShare()">Share</span></div></div></td></tr></table>
    </div>
    <div id="_PAGEFLAKES_share" style="display:none;background-color:#e4ecf4;padding:8px 8px 8px 8px">
      <div id="_PAGEFLAKES_ss" style="padding:4px 4px 8px 4px;background-color:#ffffcc;display:none;background-color:#ffffdd"></div>
      <div style="padding-bottom:8px">
        <div style="font-weight:bold">Email photo to:</div>
        <div>
          <textarea style="width:90%;border:1px solid #7f9db9;" rows="2" id="_PAGEFLAKES_emails"></textarea>
          <div style="line-height:1em;font-size:0.9em;">Separate multiple addresses by commas.</div>
          <div style="line-height:1.2em;font-size:0.9em;">Your friends' email addresses are safe. No spam, ever.</div>
        </div>
      </div>
      <div style="padding-bottom:8px">
        <div><span style="font-weight:bold;padding-right:4px;">Your first name</span><span>(optional)</span></div>
        <input type="text" id="_PAGEFLAKES_sfn" style="width:90%;height:15px;border:1px solid #7f9db9;">
      </div>
      <div style="padding-bottom:8px">
        <div><span style="font-weight:bold;padding-right:4px;">Add personal message</span><span>(optional)</span></div>
        <div>
          <textarea style="width:90%;border:1px solid #7f9db9;" name="_PAGEFLAKES_pm" id="_PAGEFLAKES_pm"></textarea>
        </div>
      </div>
      <div>
        <input type="button" onclick="_PAGEFLAKES_.sendPhotoShareEmail()" value="Send">
      </div>
    </div>
  </body>
</html>