<?xml version="1.0" encoding="UTF-8" ?>
<Module>
	<ModulePrefs title="National Geographic Photo of the Day"
		description="Displays National Geographic Photo of the day from nationalgeographic.com"
		author_email="sridhar.pg@gmail.com"
		height="365"
		width="489"
		author="Sridhar"
		author_link="http://sridharpg.blogspot.com"
		title_url="http://photography.nationalgeographic.com/photography/photo-of-the-day/"
		author_affiliation="none"
		author_location="Chennai, India"
		thumbnail="http://hosting.gmodules.com/ig/gadgets/file/103159279678197997651/nationalgeotmb.jpg"
		screenshot="http://hosting.gmodules.com/ig/gadgets/file/103159279678197997651/nationalgeo.jpg"
                scrolling="true"
	>

        </ModulePrefs>
	<Content type="html">
		<![CDATA[
		<style id="itstyle" type="text/css">
                a {
                  cursor: pointer;
                  text-decoration:none;
                  color:#0072CF !important;
                  margin-right: 5px;
                  margin-left: 5px;
                  font: normal 12px Verdana, Arial, Helvetica, sans-serif;
                }
                a:hover {
                  text-decoration:underline;
                  color:#0072CF !important;
                }
                a:visited{
                   color:#0072CF !important;
                }
                .links{
                  left: 0px;
                  top: 0px;
                  background-color: #FEFFAF;
                  opacity: 0.4;
                  filter: Alpha(Opacity=40);
                  float: left;
                  z-index: 10000;
                  position: fixed;
                  _position: absolute;
                  _top: expression((( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
                }
                p{
                    display: inline;
                }
                .summ{
                      color:#2F2F2F;
                      padding-top:3px;
                      font: bold 10px Verdana, Arial, Helvetica, sans-serif;
                      text-align: center;
                      background-color: #CFD7FF;
                      width: 470px;
                      position: absolute;
                }
                .tborder{
                      border: 1px dotted black;
                      border-top: none;
                }
                .bborder{
                      background-color: #AFBDFF;
                      border: 1px dotted black;
                      border-bottom: none;
                      text-align:center;
                }
		</style>
                <div id="links" class="links"></div>
	  	<div id="content_div" class="bborder" style="height: 325px; width:470px; text-align: center; color: #11aa33"><b>Loading...</b></div>
                <div class="summ tborder" id="imgdetails"></div>
                <a id="baseA" style="display: none" href = "/"></a>
		<script type="text/javascript">
                  var url = "http://photography.nationalgeographic.com/photography/photo-of-the-day";
                  var baseURL = "http://photography.nationalgeographic.com";
                  var pdiv = _gel("content_div");                 
                  var getHREF = function(a, isImage){
                    var da = _gel("baseA");
                    var href = (isImage)?a.src:a.href;
                    href = href.replace(da.href, "/");
                    if(href.indexOf("/") == 0){
                        href = baseURL+href;
                    }
                    return href;
                  }
                  var getTodaysImage = function(div){
                      var images = div.getElementsByTagName("img");
                      for(var i=0; i<images.length; i++){
                          var img = images[i];
                          var src = getHREF(img, true);
                          if(src.indexOf("-ga.jpg") != -1){
                            img.src = src;
                            try{
                              var burl = getHREF(img.parentNode);
                              img.onclick = function(){
                                                window.open(burl);
                                            };
                              img.style.cursor = "pointer";
                              img.title = "Click to enlarge";
                            }catch(e){}
                            return img;
                          }
                      }
                      return undefined;
                  }
                  var setSumm = function(div){
                      var divs = div.getElementsByTagName("div");
                      for(var i=0; i<divs.length; i++){
                        if(divs[i].className == "summary"){
                            var h = divs[i].getElementsByTagName("h1")[0];
                            //var p = divs[i].getElementsByTagName("p")[0];
                            //var txt = h.innerHTML+", "+p.innerHTML; 
                            var idt = _gel("imgdetails");
                            idt.innerHTML = h.innerHTML;
                        }
                      }
                  }
                  var setLinks = function(div){
                      var links = div.getElementsByTagName("a");
                      for(var j=0; j<links.length; j++){
                          var link = links[j];
                          link.setAttribute("link", getHREF(link));
                          link.href = "javascript:;";
                          link.onclick = function(){
                                                var href = this.getAttribute("link");
                                                show(href, this);
                                             };
                      }
                  }
                  var setNav = function(div){
                      var divs = div.getElementsByTagName("div");
                      for(var i=0; i<divs.length; i++){
                        var cdiv = divs[i];
                        if(cdiv.className == "slide-navigation"){
                          var lks = _gel("links");
                          lks.innerHTML = "";
                          lks.appendChild(cdiv);
                          setLinks(lks);
                          break;
                        }
                      }
                      return undefined;
                  }
                  var startAnimate = function(img, oldImg){
                      var op = img.style.opacity*100;
                      op+=10;
                      img.style.opacity = op/100;
                      img.style.filter = 'Alpha(Opacity='+op+')';
                      if(op == 100){
                        if(oldImg){
                          oldImg.parentNode.removeChild(oldImg);
                        }
                      }else{
                        setTimeout(function(){startAnimate(img, oldImg);}, 100);
                      }
                  }
                  var display = function(img){
                      var b = pdiv.getElementsByTagName("b")[0];
                      if(b){
                          b.parentNode.removeChild(b);
                      }
                      var firstNode = pdiv.getElementsByTagName("img")[0];
                      with(img.style){
                        position = "absolute";
                        zIndex = (!firstNode)?100:(firstNode.style.zIndex*1)+2;
                        left = top = "0px";
                        opacity = "0";
                        filter = "Alpha(Opacity=0)";
                      }
                      pdiv.appendChild(img);
                      startAnimate(img, firstNode);
                  }
                  var preLoadImageAndShow = function(img){
                      img.onload = function(){
                                      setTimeout(function(){display(img);this.onload = null;}, 100);
                                   }
                  }
                  var performAction = function(res) {
                          if(!res){
                                return;
                          }
                          var div = document.createElement("div");
                          div.innerHTML = res;
                          var img = getTodaysImage(div);
                          if(!img){
                              pdiv.innerHTML = "Error retreiving todays image";
                              return;
                          }
                          setNav(div);
                          try{
                            setSumm(div);
                          }catch(e){
                          }
                          preLoadImageAndShow(img);
		  }
                  var init = function(){
                        _IG_FetchContent(url, performAction);
                        //_IG_AdjustIFrameHeight()                   
                   }
                   init();
                   var show = function(purl, ele){
                        if(ele){
                          ele.blur();
                        }
                        url = purl
                        init();
                     }
		</script>
		]]>
	</Content>
</Module>


