var current_picture = new Image();
    var pichref;
    
    function getHTTPObject() { 
       var xmlhttp;  
       /*@cc_on 
       @if (@_jscript_version >= 5) 
          try { 
              xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
          } catch (e) { 
             try { 
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
             } catch (E) { 
                xmlhttp = false; 
             } 
          } 
       @else 
       xmlhttp = false; 
       @end @*/ 
       if (!xmlhttp && typeof XMLHttpRequest != 'undefined') { 
         try { 
           xmlhttp = new XMLHttpRequest(); 
         } catch (e) { 
           xmlhttp = false; 
         }
       } 
       return xmlhttp; 
    }
    
    var DHTML = (document.getElementById || document.all || document.layers);
    
    function getObj(name)
    {
      if (document.getElementById)
      {
        this.obj = document.getElementById(name);
        this.style = document.getElementById(name).style;
      }
      else if (document.all)
      {
        this.obj = document.all[name];
        this.style = document.all[name].style;
      }
      else if (document.layers)
      {
       	this.obj = document.layers[name];
       	this.style = document.layers[name];
      }
    }
    
    function invi(flag, name)
    {
        if (!DHTML) return;
        var x = new getObj(name);
        x.style.visibility = (flag) ? 'hidden' : 'visible'
    }
    
    function disp(flag, name)
    {
        if (!DHTML) return;
        var x = new getObj(name);
        x.style.display = (flag) ? 'block' : 'none'
    }
    
    function initHandlers() {
    
      // add an onclick event to every hyperlink with a class of 'setPicture'
      // This is all of the thumbnail images.  This causes the main picture
      // to be updated with the thumbnail image when it is clicked on.
      var els = document.getElementsByTagName("a");
     
      for(var i = 0; i < els.length; i++) {
        if (els[i].className.indexOf("setPicture") != -1) {
           els[i].onclick=setPicture;
        }
        
        if (els[i].className.indexOf("newThumb") != -1) {
           els[i].onclick=updateCategory;
        }
      }
     
      // Add onclick handlers to the menuitem links
      // in the menu (leftbox)
      var elements = document.getElementsByName("menuitem");

      for (var i=0; i<elements.length; i++) {
          elements[i].onclick=updateCategory;
      }
      
      // add onsubmit event to the two form buttons.  
      var form1;
      form1 = document.getElementById("nextthumb");
      form1.onsubmit=getThumbs;
      form1 = document.getElementById("prethumb");
      form1.onsubmit=getThumbs;
    }
    
    function setTextContent(element, text) 
    {
       // Debug block
       //for (i=0; i<element.childNodes.length; i++) {
       //   alert("name=" + element.childNodes[i].nodeName + "\n" + "type=" + element.childNodes[i].nodeType + "\n" + "value=" + element.childNodes[i].nodeValue); 
       //}
          
       while (element.hasChildNodes()) 
       {
          element.removeChild(element.lastChild);
       }
       var doc = element.ownerDocument || document;
       element.appendChild(doc.createTextNode(text));
    }

    function updateCategory() {
        var offset = 0;
        var catid;
        var max_items;
        var form;
        var index;
        
        var parameterString = this.href.replace(/.*\?(.*)/, "$1");
        var parameterTokens = parameterString.split("&");
        var parameterList = new Array();

        for (i = 0; i < parameterTokens.length; i++)
        {
            var parameterName = parameterTokens[i].replace(/(.*)=.*/, "$1");
            var parameterValue = parameterTokens[i].replace(/.*=(.*)/, "$1");
    
            parameterList[parameterName] = parameterValue;
        }
        
        catid = parameterList["id"];
        pictureid = parameterList["pid"];
        els = document.getElementById("nextthumb").elements;
        for(var i = 0; i < els.length; i++) {
            if (els[i].id.indexOf("catid") !=- 1) {
               els[i].value = catid;
            }
            
            if (els[i].id.indexOf("max_items") !=- 1) {
                max_items = els[i].value;
            }
        }
        
        els = document.getElementById("prethumb").elements;
        for(var i = 0; i < els.length; i++) {
            if (els[i].id.indexOf("catid") !=- 1) {
               els[i].value = catid;
            }
        }
        
        url = "getThumbs.html?offset=" + escape(offset) + "&catid=" + escape(catid) + "&max_items=" + escape(max_items) + "&update=1" + "&pid=" + escape(pictureid);
        http.open("GET", url, true); 
        http.onreadystatechange = handleHttpResponse; 
        http.send(null);
      

        return false;    
    }
    
    function getThumbs() {
        // This function is invoked from the submit button
        // of either the prethumb or nextthumb forms
        
        // Disable the buttons until the results are returned in
        // the handleHttpResponse callback.  This should prevent
        // multiple submits and multithreading issues.
        submitButton = document.getElementById("right");
        submitButton.disabled = true;
        
        submitButton = document.getElementById("left");
        submitButton.disabled = true;

        // Retrieve the input parameters
        els = this.elements;
        for(var i = 0; i < els.length; i++) {
          if (els[i].id.indexOf("offset") !=- 1) {
             offset = els[i].value;
          }

          if (els[i].id.indexOf("id") !=- 1) {
             catid = els[i].value;
          }

          if (els[i].id.indexOf("max_items") !=- 1) {
             max_items = els[i].value;
          }
        }
        
        // build the request and send it.
        url = "getThumbs.html?offset=" + escape(offset) + "&catid=" + escape(catid) + "&max_items=" + escape(max_items)
        http.open("GET", url, true); 
        http.onreadystatechange = handleHttpResponse; 
        http.send(null);
        return false;
    } 
    
    function handleHttpResponse() {
      var form;
      var index;
      var titleDesc;
      var responseList = new Array();

      if (http.readyState == 4) {
        // Debug line:
        //document.write(http.responseText);
        
        // Split the '!' delimited response into an array
        var responseTokens = http.responseText.split("!");
        
        // Pull out the name value pairs.
        for (i = 0; i < responseTokens.length; i++)
        {
            var parameterName = responseTokens[i].replace(/([^=]+)=.*/, "$1");
            var parameterValue = responseTokens[i].replace(/[^=]+=(.*)/, "$1");
    
            responseList[parameterName] = parameterValue;
        }
        
        var offset = responseList["offset"];
        var prev_offset = responseList["prev_offset"];
        var next_offset = responseList["next_offset"];
        var catid = responseList["catid"];
        var thumbCount = responseList["thumbcount"];
        var max_items = responseList["max_items"];
        var update = responseList["update"];
        var numPhotos = responseList["numPhotos"];
        var name = responseList["name"];
        var desc = responseList["desc"];
        var menucount = responseList["menucount"];
        
        // expand menus
        for (i=0; i<menucount; i++) {
            menuNumber = "menu" + i;
            menuId = responseList[menuNumber];
            expand(menuId);
        }

        for (i=0; i<max_items; i++) {
            if (i < thumbCount) {
                // Get the anchor element for the thumbnail.
                element_name = "pic_" + (i+1);
                var anchor = document.getElementsByName(element_name).item(0);
                
                // Get the url string and assign it to the anchor href.
                urlIndex = "url" + i;
                anchor.href = responseList[urlIndex];
                anchor.onclick=setPicture;
                
                // Get the image element for the thumbnail
                element_name = "thumb_" + (i+1);
                var thumbImage = document.getElementsByName(element_name).item(0);
                
                // Get the thumbnail string and assign it to the thumb image.
                thumbIndex = "thumb" + i;
                thumbImage.src = responseList[thumbIndex];
            } else {
                // No more thumbs to update
                // Get the anchor element for the thumbnail.
                element_name = "pic_" + (i+1);
                var anchor = document.getElementsByName(element_name).item(0);
                anchor.href = "";
                anchor.onclick = function() { return false; };

                // Get the image element for the thumbnail
                element_name = "thumb_" + (i+1);
                var thumbImage = document.getElementsByName(element_name).item(0);
                
                // Set it to nada.
                // TODO: maybe set this to a 1-pixel image?
                thumbImage.src = "photos/1pixel.jpg";
                
            }
        }
        
        // set up the "prethumb" form with the new values
        els = document.getElementById("prethumb").elements;
        for(var i = 0; i < els.length; i++) {
          if (els[i].id.indexOf("offset") !=- 1) {
             els[i].value = prev_offset;
        }
          
          if (els[i].id.indexOf("catid") !=- 1) {
             els[i].value = catid;
          }
          
          if (els[i].id.indexOf("max_items") !=- 1) {
             els[i].value = max_items;
          } 
        }
        
        submitButton = document.getElementById("left");
        if (parseInt(offset) <= 0) {
            submitButton.disabled = true;
        } else {
            submitButton.disabled = false;
        }
            
         
        // set up the "nextthumb" form with the new values	 
        els = document.getElementById("nextthumb").elements;
        for(var i = 0; i < els.length; i++) {
          if (els[i].id.indexOf("offset") !=- 1) {
             els[i].value = next_offset;
          }
      
          if (els[i].id.indexOf("catid") !=- 1) {
             els[i].value = catid;
          }
          
          if (els[i].id.indexOf("max_items") !=- 1) {
             els[i].value = max_items;
          }
        }
        
        submitButton = document.getElementById("right");
        if ((parseInt(offset) + parseInt(max_items)) >= parseInt(numPhotos)) {
            submitButton.disabled = true;
        } else {
            submitButton.disabled = false;
        }
        
        if (update  == 1) {
        
           var parameterString = responseList["url0"].replace(/.*\?(.*)/, "$1");
           var parameterTokens = parameterString.split("&");
           var parameterList = new Array();
           
           for (i = 0; i < parameterTokens.length; i++)
           {
               var parameterName = parameterTokens[i].replace(/(.*)=.*/, "$1");
               var parameterValue = parameterTokens[i].replace(/.*=(.*)/, "$1");
       
               parameterList[parameterName] = parameterValue;
           }
           
           width = parameterList["width"];
           height = parameterList["height"];
           var actualHeight = height;
           var actualWidth = width;
            
           invi(false, 'load'); 
           current_picture.src = responseList["url0"];
           current_picture.onload = function() {
              var imageId = "pic";
              var image = document.images[imageId];
              setOpacity(image, 0);
            
              if (height > 400) {
                  height = 400;
                  var percent = (height / actualHeight);
                  width = Math.round(actualWidth * percent);
              }
              
              if (width > 602) {
                  width = 602;
                  var percent = (width / actualWidth);
                  height = Math.round(actualHeight * percent);
              }              
              image.src = current_picture.src;
              image.height = height;
              image.width = width;
              var link = document.getElementById("piclink");
              link.href =  responseList["url0"];
              link.onclick = showPic;
              invi(true, 'load');
              fadeIn(imageId, 0);           
           }
           
           var titleText = "Apedog's World - " + name;
           document.title = titleText;
           
           newDesc = name + " - There are " + numPhotos + " photos in this section";
           var photostotal = document.getElementById("ptotal");
           setTextContent(photostotal, newDesc);

           var description = document.getElementById("describe");
           setTextContent(description, unescape(desc));
        }
        
        var photosdisplayed = document.getElementById("pdisplay");
        newPlace = (parseInt(offset) + parseInt(1)) + "-" + (parseInt(offset) + parseInt(thumbCount));
        setTextContent(photosdisplayed, newPlace);
        
        disp(true, "titleDesc");
        disp(true, "thumbnails");
        disp(true, "picture");
        disp(true, "describe");
        disp(false, "recent");
      } 
    } 
    
    function setPicture()
    {
        if (this.href == "") {
            return false;
        }
        
        // movie?
        if ((this.href.indexOf("WMV") != -1 ) ||
           (this.href.indexOf("wmv") != -1 )) {
            // let the browser launch the media player.
            return true;
        }
        var parameterString = this.href.replace(/.*\?(.*)/, "$1");
        var hrefString = this.href;
        var parameterTokens = parameterString.split("&");
        var parameterList = new Array();
        
        invi(false, 'load');
       
        for (i = 0; i < parameterTokens.length; i++)
        {
            var parameterName = parameterTokens[i].replace(/(.*)=.*/, "$1");
            var parameterValue = parameterTokens[i].replace(/.*=(.*)/, "$1");
    
            parameterList[parameterName] = parameterValue;
        }
        
        var width = parameterList["width"];
        var height = parameterList["height"];
        var actualHeight = height;
        var actualWidth = width;
        var id = parameterList["id"];
      
        current_picture.src = this.href;
        current_picture.onload = function() {
            var imageId = "pic";
            var image = document.images[imageId];
            setOpacity(image, 0);
            
            if (height > 400) {
                height = 400;
                var percent = (height / actualHeight);
                width = Math.round(actualWidth * percent);
            }
            
            if (width > 602) {
                width = 602;
                var percent = (width / actualWidth);
                height = Math.round(actualHeight * percent);
            }
            image.src = current_picture.src;
            image.height = height;
            image.width = width;
            var link = document.getElementById("piclink");
            link.href =  hrefString;
            link.onclick = showPic;
            invi(true, 'load');
            fadeIn(imageId, 0); 
        }
        
        // request the description text asynchronously
        url = "getDesc.html?id=" + id;
        http.open("GET", url, true); 
        http.onreadystatechange = updateDescription; 
        http.send(null);

        // prevent the hyperlink from doing its default behaviour
        return false;
    }
    
    function updateDescription()
    {
      var responseList = new Array();

      if (http.readyState == 4) {
        // Split the '!' delimited response into an array
        var responseTokens = http.responseText.split("!");
        
        // Pull out the name value pairs.
        for (i = 0; i < responseTokens.length; i++)
        {
            var parameterName = responseTokens[i].replace(/([^=]+)=.*/, "$1");
            var parameterValue = responseTokens[i].replace(/[^=]+=(.*)/, "$1");
    
            responseList[parameterName] = parameterValue;
        }
        
        description = responseList["description"];
    
        var d = document.getElementById("describe");
        setTextContent(d, unescape(description));
      }
    
    }
    
    function expand(id)
    {
    	if(document.getElementById(id+"_items").style.display == 'none')
    	{
    		document.getElementById(id).innerHTML = "-" + document.getElementById(id).innerHTML.substr(1)
    		document.getElementById(id+"_items").style.display='block'
    	}
    	else
    	{
    		document.getElementById(id).innerHTML = "+" + document.getElementById(id).innerHTML.substr(1)
    		document.getElementById(id+"_items").style.display='none'
    	}
    }
    
    function showPic() {
        var parameterString = this.href.replace(/.*\?(.*)/, "$1");
        var hrefString = this.href;
        var parameterTokens = parameterString.split("&");
        var parameterList = new Array();
        
        invi(false, 'load');
       
        for (i = 0; i < parameterTokens.length; i++)
        {
            var parameterName = parameterTokens[i].replace(/(.*)=.*/, "$1");
            var parameterValue = parameterTokens[i].replace(/.*=(.*)/, "$1");
    
            parameterList[parameterName] = parameterValue;
        }
        
        var width = parseInt(parameterList["width"]) + parseInt(20);
        var height = parseInt(parameterList["height"]) + parseInt(20);
        
        current_picture.src = this.href;
        var hrefStr = this.href;
        var url = "fullImage.html?item=" + encodeURI(hrefStr);   
        var nameWindow = window.open(url,'nWindow','title=no,toolbar=no,menubar=no,location=no,height='+height+',width='+width+' ');
        return false;
    }
    
    function setOpacity(obj, opacity) {
        opacity = (opacity == 100)?99.999:opacity;
      
       // IE/Win
       obj.style.filter = "alpha(opacity:"+opacity+")";
      
       // Safari<1.2, Konqueror
       obj.style.KHTMLOpacity = opacity/100;
      
       // Older Mozilla and Firefox
       obj.style.MozOpacity = opacity/100;
      
       // Safari 1.2, newer Firefox and Mozilla, CSS3
       obj.style.opacity = opacity/100;
    }
    
    function fadeIn(objId,opacity) {
      if (document.getElementById) {
        obj = document.getElementById(objId);
        if (opacity <= 100) {
          setOpacity(obj, opacity);
          opacity += 10;
          window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 50);
        }
      }
    }
    
    var http = getHTTPObject(); // We create the HTTP Object
    //-->