<?xml  
   version="1.0"  encoding="UTF-8"?>
<Module>
  <ModulePrefs
    title="Flickr Slideshow"
    title_url="http://www.flickr.com"
    scrolling="true"
    height="280"
    width="300"
    author="Ben Petro"
    author_email="benpetro@gmail.com"
    author_location="Brisbane, QLD, Australia"
    author_link="http://benpetro.blogspot.com"
    author_photo="http://benpetro.googlepages.com/avatar.JPG"
    description="A simple gadget to display the most recent public photos uploaded to Flickr, with the ability to filter by the tags of your choice. 
      You can view the photos in a standard slideshow format, or by contact sheet with an image preview."
    thumbnail="http://benpetro.googlepages.com/flickr_thumbnail.png"
    screenshot="http://benpetro.googlepages.com/flickr_screenshot.png">
    <Require feature="analytics" />
    <Require feature="minimessage"/> 
    <Require feature="dynamic-height"/>
  </ModulePrefs>
  <UserPref name="tags" display_name="Tags" datatype="string" />
  <UserPref name="timerSeconds" display_name="Delay" datatype="enum" default_value="8">
    <EnumValue value="13" display_value="Slow" />
    <EnumValue value="8" display_value="Medium" />
    <EnumValue value="5" display_value="Fast" />
  </UserPref>
  <UserPref name="displayType" display_name="Display" datatype="enum" default_value="1">
    <EnumValue value="0" display_value="Slideshow" />
    <EnumValue value="1" display_value="Contact Sheet" />
  </UserPref>
  <Content type="html">
    <![CDATA[
    <style>
      div,td,body,input{font-size:8pt;}
      .off{display:none;}
      .on{display:block;}
      body{margin:0px;}
      .thumbnail{width:50px;height:50px;border:1px solid #999;margin:1px;cursor:pointer;}
      #div_preview{background:#FFF;border:2px solid #666;padding:5px;position:absolute;top:10px;left:10px;}
      #div_close_preview{cursor:pointer;margin-bottom:2px;}
      #img_preview{border:1px solid #999;}
      #div_preview_title{margin-top:3px;text-align:center;}
    </style>
    <div id="div_message" class="off" style="text-align:center;font-weight:bold;"></div>
    
    <div id="div_loading" align="center" class="on" style="margin:20px;">
      <img src="http://www.bopsta.com/gadget/asx/indicator_medium.gif" style="margin-bottom:10px;"/><br />
      <em>Loading photos...</em>
    </div>
    
    <div id="div_content" style="text-align:center;" class="off">
      <div id="div_tags_user" style="text-align:left;color:#999;margin-bottom:5px;" class="off"></div>
      <a id="anchor" target="_blank"><img id="image" style="border:1px solid #999;display:none;" /></a>
      <div id="title" style="text-align:center;margin-top:5px;font-weight:bold;"></div>
    </div>
    
    <div id="div_multiple" class="off" style="text-align:center;">
      <div id="div_multiple_images"></div>
      <a onclick="loadXml();" style="cursor:pointer;" class="off">Refresh</a>
    </div>
    <div id="div_preview" class="off">
      <div id="div_close_preview" onclick="_gel('div_preview').className='off';timeoutMultiple();_gel('img_preview').src='';">Close</div>
      <div style="text-align:center;"><a id="a_preview" target="_blank"><img id="img_preview" /></a></div>
      <div id="div_preview_title"></div>
    </div>
    
    <div style="text-align:center;margin-top:10px;border-top:1px solid #CCC;padding-top:5px;">
      <div style="float:left;margin-right:10px;">
        <a href="http://nookydiary.com" target="_blank"><img src="http://nookydiary.com/images/logo_sm.png" alt="Producly brought to you by Nooky Diary"></a>
      </div>
      <form style="display:inline;" onsubmit="search();return false;" ID="Form1">
        <table border="0" cellpadding="2" align="center">
          <tr>
            <td>Tags:</td>
            <td><input type="text" id="txtTags" NAME="txtTags" style="width:70px;" tabindex="0"/></td>
            <td rowspan="2"><input type="submit" value="Search" ID="btn_search" style="width:50px;" tabindex="2" /></td>
          </tr>
          <tr>
            <td>User:</td>
            <td><input type="text" id="txtUsername" name="txtUsername" style="width:70px;" tabindex="1" /></td>
          </tr>
        </table>
      </form>
    </div>
    
    <script type="text/javascript">
      //first, add the new message:
      // var msg = new _IG_MiniMessage(__MODULE_ID__);
      //msg.createDismissibleMessage("We have just added a new multiple image layout to the gadget. Try it out by changing your settings!");
      
      var api_key = "c0e5e683874acd6d82b1329cd6f1a45e";
      var rest = "http://api.flickr.com/services/rest/"
      var photoList = null;
      var photoIndex = 0;
      var tempImage = null;
      var tempSrc = "";
      var tempAnchor = "";
      var tempTitle = "";
      var tags = "";
      var user_id = "";
      var timeoutId = 0;
      
      function loadSlideshow()
      {
        var prefs = new _IG_Prefs(__MODULE_ID__);
        tags = prefs.getString("tags");
        loadXml();
      }
      
      function loadXml()
      {
        window.clearTimeout(timeoutId);
        var url = "http://api.flickr.com/services/feeds/photos_public.gne?d=" + Math.random();
        _gel("div_tags_user").innerHTML = "";
      
        if ( tags != "" && tags != "undefined" && tags != null )
        {
          //remove the spaces from the tags:
          while(tags.indexOf(" ") >-1)
            tags = tags.replace(" ","");
            
          url += "&tags=" + escape(tags);
          _gel("div_tags_user").innerHTML = "Tags: " + tags;
          _gel("div_tags_user").className = "on";
        }
        
        if (user_id != "" && user_id != "undefined" )
        {
          url += "&id=" + user_id;
        }
        
        //now load the xml
        _IG_FetchXmlContent(url, callbackList);
      }
      
      function callbackList(response)
      {
        if (response == null || typeof(response) != "object" || response.firstChild == null)
	{
	  _gel("div_content").innerHTML = "<i>Invalid data.</i>";
	  return;	
	}
        else
        {
          photoList = response.getElementsByTagName("entry");
          if ( photoList.length > 0 )
          {
            photoIndex = 0;
            //check if we're showing a single photo, or multiple:
            var prefs = new _IG_Prefs(__MODULE_ID__);
            var displayType = prefs.getInt("displayType");
            if ( displayType == 0 )
              displaySingle();
            else
              displayMultiple();
              
            _gel("div_message").className = "off";
            _gel("div_content").className = "on";
          }
          else
          {
            _gel("div_message").innerHTML = "<i>No images to display.</i>";
            _gel("div_message").className = "on";
            _gel("div_content").className = "off";
            _gel("div_loading").className = "off";
          }
        }
        _gel("div_loading").className = "off";
        _gel("btn_search").disabled = false;
      }
      
      function displaySingle()
      {
        //load the first image straight away
        if ( photoIndex == 0 )
          setImageAttributes(photoList[photoIndex]);
          
        //now set the elements on the page to what we've previously retrieved:
        //this acts as a preloader
        _gel("image").src = tempImage.src;
        _gel("anchor").href = tempAnchor;
        _gel("title").innerHTML = tempTitle;
        _gel("image").style.display = '';
	
        //now display the NEXT photo OR reload the XML:
        photoIndex++;
        
        //get the slideshow timer:
        var prefs = new _IG_Prefs(__MODULE_ID__);
        var milliseconds = prefs.getInt("timerSeconds") * 1000;
        if ( photoIndex < photoList.length )
        {
          //preload the attributes for the next image:
          setImageAttributes(photoList[photoIndex]);
          //_IG_AdjustIFrameHeight();
        
          //now rerun this function and it will automatically switch to the next photo
          timeoutId = window.setTimeout("displaySingle();",milliseconds);
        }
        else //otherwise, we need to start again and get a full list of new photos.
        {
          timeoutId = window.setTimeout("loadXml();",milliseconds);
        }
        
        _gel("div_loading").className = "off";
      }
      
      function displayMultiple()
      {
        _gel("div_multiple_images").innerHTML = "";
        //this needs to list all photos as thumbnails on the page:
        for (var i=0; i<photoList.length && i < 12;i++)
        {
          var photo = photoList[i];
          var content = photo.getElementsByTagName("content")[0].firstChild.nodeValue;
          var image = _IG_GetImage(getImageSrc(content));
          image.className = "thumbnail";
          var image_href = getImageHref(photo.getElementsByTagName('link'));
          var title = photo.getElementsByTagName("title")[0].firstChild.nodeValue
          //get tthe author:
          var author = photo.getElementsByTagName("author")[0];
          var author_url = author.getElementsByTagName("uri")[0].firstChild.nodeValue;
          var author_name = author.getElementsByTagName("name")[0].firstChild.nodeValue;
            
          image.setAttribute("onClick", "previewImage('"+escape(image.src)+"','"+escape(image_href)+"','"+escape(title) +"','"+escape(author_name)+"','"+escape(author_url)+"');");
          _gel("div_multiple_images").appendChild(image);
        }
        _gel("div_multiple").className = "on";
        _IG_AdjustIFrameHeight();
        timeoutMultiple();
      }
      
      function timeoutMultiple()
      {
        var prefs = new _IG_Prefs(__MODULE_ID__);
        var milliseconds = prefs.getInt("timerSeconds") * 1000 * 2;
        timeoutId = window.setTimeout("loadXml();",milliseconds );
      }
      
      function previewImage(src, href, title, author_name, author_url)
      {
        //clear the timeout:
        window.clearTimeout(timeoutId);
        _gel("div_preview").className = "on";
        _gel("img_preview").src = unescape(src);
        _gel("a_preview").href = unescape(href);
        
        _gel("div_preview_title").innerHTML = unescape(title) + " by " +
          "<a href=\"" + unescape(author_url) +  "\" target=\"_blank\">" + unescape(author_name) + "</a> " +
          "<a href=\"javascript:search('"+unescape(author_name)+"');\">...</a>";
      }
      
      function getImageSrc( text )
      {
        //remove the text up to the opening img src tag:
        var src = text.substr(text.indexOf('<img src'), (text.length - text.indexOf('<img src')));
        //remove the ending string:
        src = src.substr(0, src.indexOf("\" "));
        //now remove the '<img' tag
        src = src.substr(10, src.length-10);
        return src;
      }
      
      function setImageAttributes(photo)
      {
        //get the 'links' from the XML for this photo
        
        var links = photo.getElementsByTagName("link");
        var author = photo.getElementsByTagName("author")[0];
        var author_url = author.getElementsByTagName("uri")[0].firstChild.nodeValue;
        var author_name = author.getElementsByTagName("name")[0].firstChild.nodeValue;
        tempTitle = photo.getElementsByTagName("title")[0].firstChild.nodeValue + " by " +
          "<a href=\"" + author_url +  "\" target=\"_blank\">" + author_name + "</a> " +
          "<a href=\"javascript:search('"+author_name+"');\">...</a>";
        
        //now I need to filter through the content in order to get the correct image src
        var content = photo.getElementsByTagName("content")[0].firstChild.nodeValue;
        tempImage = _IG_GetImage(getImageSrc(content)); 
			
	tempAnchor = getImageHref(links);
      }
      
      function getImageHref( links )
      {
        var href = "";
        //go through each link and make sure we're on the 'enclosure' so we can get the image:
        for ( var j = 0; j < links.length; j++)
        {
          var rel = links[j].getAttribute("rel");
          if ( rel == "alternate" ) //this is the link
          {
            href = links[j].getAttribute("href");
          }
        }
        return href;
      }
      
      function search(name)
      {
        _gel("div_loading").className = "on";
        _gel("div_content").className = "off";
        _gel("div_multiple").className = "off";
        _gel("div_preview").className = "off";
        _gel("btn_search").disabled = true;
        window.clearTimeout(timeoutId);
        
        tags = _gel("txtTags").value;
        if ( name != null && name != "undefined")
        {
          var username = name;
          _gel("txtUsername").value = name;
        }
        else
          var username = _gel("txtUsername").value;
          
        if ( username != "" && username != null )
        {
          //let's get the user:
          _IG_FetchXmlContent(rest + "?api_key=" + api_key + 
            "&method=flickr.people.findByUsername&username=" + escape(username),
            callbackLoadUser);
        }
	else
	{
	  user_id = "";
	  loadXml();
	}
      }
      
      function callbackLoadUser(response)
      {
        if (response == null || typeof(response) != "object" || response.firstChild == null)
        {
          alert("Error in REST request");
          return;
        }
        else
        {
          //check if it's valid:
          var rsp = response.getElementsByTagName("rsp")[0];
          if ( rsp.getAttribute("stat") == "ok" )
          {
            user_id = response.getElementsByTagName("user")[0].getAttribute("id");
            loadXml();
          }
          else
          {
            alert("Username not found");
            user_id = "";
            _gel("txtUsername").value = user_id;
            loadXml();
          }
        }
      }
      _IG_RegisterOnloadHandler(loadSlideshow);
      _IG_Analytics("UA-220874-14", "/flickr_slideshow_2");
    </script>
    ]]>
  </Content>
</Module>

