// Preload the spinning image...
img_pleasewait =new Image(30,30);img_pleasewait.src="./images/wait30trans.gif";

/*
    loadImage - loads an image through a javascript call to return a photo object with the image information to output for a given album...
    INPUT:
        imageno - image # (order #) of the image to retrieve
        direction - the direction that the scroll is moving in.  Use 0 if the scroll is not moving in any direction...
        gallerytype - type of gallery to show (determines which classes to use).  'P': Photoessay, 'S': StudentLens...
        
    OUTPUT:
        true if everything was returned OK, false if otherwise.
*/

function loadImage(imageno,direction,gallerytype)
{
    // Vars...
    var scrollamt = 0;
    
    // Make sure an image is not being requested that is not in this album...
    if(imageno >= photoCount)
        return false;
        
    // If the current image no isn't in the range of offset - offset + 4, then scroll the thumbnails to the correct spot...
    if((imageno-parseInt(document.getElementById('offset').value)) < 0 || (imageno - parseInt(document.getElementById('offset').value)) > 4)
    {
        scrollamt = (imageno - parseInt(document.getElementById('offset').value));
        scrollThumbs(parseInt(document.getElementById('offset').value),scrollamt,5);
    }
    
    imageObject = document.createElement('img');
    imageObject.id = 'image_large';
    imageObject.src = '../images/wait30trans.gif';
    document.getElementById('innerimagewell').replaceChild(imageObject,document.getElementById('image_large'));
    
    // Updates the order of an album/photo combination...
    var oXHR = zXmlHttp.createRequest();
    
    oXHR.open("get","../ajaxcalls/getPhotoInformation.php?orderno="+(imageno)+"&albumid="+albumID,true);
    
    oXHR.onreadystatechange = function() {
        if(oXHR.readyState == 4){
            if(oXHR.status == 200 || oXHR.status == 304) {
                    // good.
                    if(oXHR.responseText != "{}")
                    {
                        
                        photoObject = JSON.parse(oXHR.responseText);
                        
                        // Set the variables and update the album...
                        imageObject = document.createElement('img');
                        imageObject.id = 'image_large';
                        imageObject.src = '../images/albums/'+albumID+'/resized/'+photoObject.photo_filename;
                        imageObject.className='mainimg';
                        document.getElementById('innerimagewell').replaceChild(imageObject,document.getElementById('image_large'));
                        
                        document.getElementById('phototitle').innerHTML = photoObject.photo_title;
                        document.getElementById('captiondiv').innerHTML = photoObject.photo_caption;
                        
                        // Check to see if the 'next' or 'previous' buttons should be visible...
                        if(imageno == 0)
                            document.getElementById('img_prev').style.display="none";
                        else
                        {
                            document.getElementById('img_prev').style.display="block";
                            document.getElementById('img_prev').onclick = function(){loadImage((imageno-1),-1,gallerytype);};
                        }
                            
                        if((imageno+1) >= photoCount)
                            document.getElementById('img_next').style.display="none";
                        else
                        {
                            document.getElementById('img_next').style.display="block";
                            document.getElementById('img_next').onclick = function(){loadImage((imageno+1),1,gallerytype);};
                        }
                        
                        document.getElementById('curphoto').value = imageno;
                        
                        // Determine if the thumbnail image is currently being displayed...if it is, then update the class...
                        if(imageno - parseInt(document.getElementById('offset').value) < 0 || imageno - parseInt(document.getElementById('offset').value) > 4)
                        {
                            scrollThumbs(parseInt(document.getElementById('offset').value),direction,5)  // The image is not in the correct offset...scroll
                        }
                        else
                        {
                            // Highlight the correct thumbnail...
                            if(photoCount < 4)
                                imagesshown = photoCount;
                            else
                                imagesshown = 5;
                                                            
                            for(i=0;i<imagesshown;i++)
                            {                                                                                                                                            
                                if(!document.getElementById('thumb'+i))
                                    continue;
                                    
                                if(((imageno - parseInt(document.getElementById('offset').value)) == parseInt(i)))
                                    document.getElementById('thumb'+i).className="selectedthumbnail";
                                else                                                                        
                                    document.getElementById('thumb'+i).className="";                                  
                            }
                        }
                        document.getElementById('navtext').innerHTML=(imageno+1) + " of " + photoCount;                            
                    }
            }else{
                    alert("An error occurred!" + oXHR.statusText);
                    return false;
            }
        }
    }
    oXHR.send(null);
    
    return true;
}     

/*
        scrollThumbs - 
            Function will scroll through the thumbnails and move in a particular direction.
            INPUT: 
                startat - value of which picture to start scrolling from.
                scrollamt - amount of spaces to scroll.  This can be a negative number to move backwards.
                maxpics - the maximum number of thumbnails that are being output onto the screen.
                
            OUTPUT:
                none
    
    */
    var valuearray = new Array();      
    function scrollThumbs(startat,scrollamt,maxpics)
    {
        // Error checking...
        if(maxpics < 1 || startat < 0)
            return;
        
        if(startat + scrollamt < 0)
            return;                                                                                                 
        
        // Vars...
        var setvalue = 0;
        var imageid = "";
        
        // Will scroll the thumbnails in the correct order...
        for(i=0; i<maxpics;i++)
        {
            // Update the vars...
            setvalue = (i+startat+scrollamt);
            imageid = 'img'+i;
            
            if(!document.getElementById('thumb'+i))
                continue;
            
            if(!document.getElementById(imageid))
                continue;
            
            // Create the new image object and replace the old one...
            imageObject = document.createElement('img');
            imageObject.id = 'img'+i;
            imageObject.src = "/images/albums/"+albumID+"/thumbs/"+imagesarray[startat+i+scrollamt];
            document.getElementById('thumb'+i).replaceChild(imageObject,document.getElementById('thumb'+i).childNodes[0]);
            document.getElementById('thumb'+i).style.visibility = "visible"
            
            // IE doesn't retain the value of setvalue when you use onclick for whatever reason, so temporarily put it in a
            // value array and we'll access it based on the ID of the div...
            valuearray[i] = parseInt(setvalue);
            
            document.getElementById(imageid).onclick = function(){loadImage(valuearray[this.id.substring((this.id.length-1))])};
            
            // Set the appropriate class...
            if((startat + i+scrollamt) == document.getElementById('curphoto').value)
                document.getElementById('thumb'+i).className = "selectedthumbnail";
            else
                document.getElementById('thumb'+i).className = "";
            
            // If the next thumnail is not in the range, then we don't need to continue looping...
            if((startat+i+scrollamt+1) >= photoCount)                
            {
                // Set the visibility of the remaining images to hidden...
                for(n=(i+1);n<maxpics;n++)
                {
                    document.getElementById('thumb'+n).style.visibility = "hidden";
                    
                }
                break;
            }
        }
        
        // Update the arrow visibility...
        if((startat + scrollamt) < 1)
            document.getElementById('thumb_prev').style.display = "none";
        else
            document.getElementById('thumb_prev').style.display = "block";
            
        if((startat+scrollamt+maxpics) >= photoCount)
            document.getElementById('thumb_next').style.display = "none";
        else
            document.getElementById('thumb_next').style.display = "block";                
            
        document.getElementById('thumbprevlink').onclick = function(){scrollThumbs((startat+scrollamt),-1,5);}
        document.getElementById('thumbnextlink').onclick = function(){scrollThumbs((startat+scrollamt),1,5);}
        
        // Update the offset value...
        document.getElementById('offset').value = (parseInt(document.getElementById('offset').value) + parseInt(scrollamt));
        
        return;
    }