//*************************************************
// displayController.js
//
//Summary: 
//
//Author:      Jeff Buhr
//
//Created:     19 Spt 08
//Summary of Modifications:
//       none
//*************************************************

// display class
function display(galName, user, album, pictureID) {

   // constants
   this.BASE_DIR         = "photogallery/";
   this.IMAGE_CONTAINER  = "imageContainer";
   this.IMAGE_LIST       = "listOfImages";
   this.HEADING          = "heading";

   this.ALBUM_ID         = "albumTitle";
   this.SEL_BOX_ID       = "albums";
   this.LD_ALBM_TXT      = "Go";

   // Class Member Vars
   this.album        = album;
   this.imageArray;
   this.curtImage = 0;

   this.albums = new albumsController(this,this.BASE_DIR);
   this.images = new imagesController(this,this.BASE_DIR);
   this.imagePreloader = null;

   this.initialize = function() {
      // set the title
      //  document.getElementById(this.HEADING).innerHTML = galName;

      // decide what to display based on URL passed variables
      this.albums.loadAlbums();
      this.images.loadAlbum(this.album);
   }
   
   // removes all children from a DOM node
   this.removeAnyChildren = function(element) {

      if (isset(element)) {

         // remove the first child as long as there's more children
         while (element.hasChildNodes()) {
            element.removeChild(element.firstChild);
         }
      }
   }

   // called when ajax error occurs
   this.showError = function(errorText) {

      // display the error in the image window
      var imageDiv = document.getElementById(this.IMAGE_CONTAINER);
      var errorText = document.createTextNode(errorText);
      this.removeAnyChildren(imageDiv);
      imageDiv.appendChild(errorText);
   }

   // makes all list items a normal font weight
   this.removeBoldFromImageList = function() {

      var imageList = document.getElementById(this.IMAGE_LIST);

      // check if there are any images
      if (imageList.hasChildNodes()) {

         var curListItem = imageList.firstChild;
         curListItem.style.fontWeight = "normal";

         // loop through list items and make them not bold
         while (curListItem.nextSibling != null) {
            curListItem = curListItem.nextSibling;

            // set font weight to normal
            curListItem.style.fontWeight = "normal";     
         }
         
      }
   }

   // Call back function from preloader javascript class.
   // Updates the progress bar with a percent
   this.updatePercent = function(percent) {
     // this.PROGRESS_BAR     = "progressBar";     // THIS IS BAD!!! FIX
     // alert(this.BASE_DIR + " " + isset(this.BASE_DIR));
     // alert("this.PROGRESS_BAR isset " + isset(this.PROGRESS_BAR));
      var progBar = document.getElementById(this.PROGRESS_BAR);
      var loadingText = document.createTextNode(percent + "%");
      picGallery.display.removeAnyChildren(progBar);
      progBar.appendChild(loadingText);
      progBar.style.width = percent + "%";
   }

   // Call back function from preloader javascript class.
   // Updates the progress bar with a percent
   this.updateFinished = function(percent) {

      var progBar = document.getElementById(this.PROGRESS_BAR);
      progBar.style.width = "100%";

      // change loading bar text to "done"
      var loadingText = document.createTextNode(this.FINISHED_PERCENT);
      picGallery.display.removeAnyChildren(progBar);
      progBar.appendChild(loadingText);
   }

   // Call back function from preloader javascript class.
   // Shows when if an image is preloaded or not
   this.updateImageListing = function(imageId,loadSuccess) {

      var imageListing = document.getElementById(this.IMG_LST_PREFIX + imageId);
      if (isset(imageListing) == true) {
         if (loadSuccess == true) {
            imageListing.style.color = this.LOADED_COLOR;
         }
      }
   }

   // updates the albums with the array of album names (albums)
   this.updateAlbumList = function(albums) {

      // create a new select box
      var albumSelBox  = document.createElement('select');
      albumSelBox.id   = this.SEL_BOX_ID;
      albumSelBox.name = this.SEL_BOX_ID;

      // check if any albums exist
      if (isset(albums[1])) {

         // go through each album
         for (x = 1; isset(albums[x]); x++) {

            // add a new option to the select box
            var myNewAlbum     = document.createElement('option');
            myNewAlbum.id      = x;
            myNewAlbum.value   = albums[x];
            var optionText     = document.createTextNode(albums[x]);
            myNewAlbum.appendChild(optionText);
            albumSelBox.appendChild(myNewAlbum);

         }

      }
      else { // show a diabled drop down menu
         albumSelBox.disabled = "disabled";
      }

      // add the select box to the DOM
      var albumDiv = document.getElementById(this.ALBUM_ID);
      this.removeAnyChildren(albumDiv);
      albumDiv.appendChild(albumSelBox);

      // add a link to use selected album to the dom
      var myLink     = document.createElement('a');
      myLink.href    = "#";
      myLink.onclick = "picGallery.display.images.loadAlbum(document.getElementById('albums').options[document.getElementById('albums').selectedIndex].value);";
      myLink.title   =   "Load Selected Album";
      myLink.appendChild(document.createTextNode(this.LD_ALBM_TXT));
      albumDiv.appendChild(document.createTextNode(" "));
      albumDiv.appendChild(myLink);
      albumDiv.appendChild(document.createElement('br'));
      albumDiv.appendChild(document.createElement('br'));
   }

   // changes to the next image
   this.displayNextImage = function() {
      this.curImage++;

      // check bounds
      if (this.curImage > this.imagePreloader.getImageNamesArray().length - 1) {
         this.curImage = 0;
      }

      this.showImage(this.curImage);
   }

   // changes to the previous image
   this.displayPrevImage = function() {
      this.curImage--;

      // check bounds
      if (this.curImage < 0) {
         this.curImage = this.imagePreloader.getImageNamesArray().length - 1;
      }

      this.showImage(this.curImage);
   }

   // replaces the image in the window
   this.showImage = function(imageNum) {
      
      // check if the image is loaded (or loading)
      if (!this.imagePreloader.isLoaded(imageNum)) {
         // load it and preload images after it
         this.imagePreloader.load(imageNum);
      }
      
      this.imagePreloader.preloadFrom(imageNum); // ensures we're always loading images ahead

      // get the image array from the preloader
      var imageArray = this.imagePreloader.getImageArray();

      // remove the old image
      var imageDiv = document.getElementById(this.IMAGE_CONTAINER);
      this.removeAnyChildren(imageDiv);

      // add the new image
      var myNewImage = document.createElement('img');
      myNewImage.src = imageArray[imageNum].src;
      myNewImage.alt = imageArray[imageNum].src;
      imageDiv.appendChild(myNewImage);

      // set the pointer to the current image
      this.curImage = imageNum;

      // update the image list to make the selected one bold
      this.removeBoldFromImageList();
      var selectedListItem = document.getElementById("pictureElm" + imageNum);
      selectedListItem.style.fontWeight = "bold";
   }

   this.collapseInfo = function() {
      var imgCon = document.getElementById("imageContainer");
      var abmInf = document.getElementById("albuminfo");
      var aiCBtn = document.getElementById("ai_hide");
      var aiEBtn = document.getElementById("ai_show");

      aiCBtn.style.display = "none";
      aiEBtn.style.display = "block";
      abmInf.style.display = "none";
      abmInf.style.width = "30px";
      imgCon.style.width = "623px";
   }

   this.expandInfo = function() {
      var imgCon = document.getElementById("imageContainer");
      var abmInf = document.getElementById("albuminfo");
      var aiCBtn = document.getElementById("ai_hide");
      var aiEBtn = document.getElementById("ai_show");

      aiCBtn.style.display = "block";
      aiEBtn.style.display = "none";
      abmInf.style.display = "block";
      abmInf.style.width = "160px";
      imgCon.style.width = "480px";
   }

}