//-- Globals -------------------------------/

var gContext = new Array();;
//var albumVar = new renderAlbum('album1',1);

//------------------------------------------/
function highlightMenuImage(image) {
    image.src="./resources/images/album1_hlt.png";
}

function startUpload(){    
   document.getElementById('f1_upload_process').style.visibility = 'visible';    
   return true;
}

function stopUpload(response, albumRequest)
{      
   var result = '';      
   if (1 == 1){         
      document.getElementById('newphoto').innerHTML = response;      
   }      
   else {         
      document.getElementById('result').innerHTML =  '<span class="emsg">There was an error during file upload!<\/span><br/><br/>';
   }      
   ajaxCall(albumRequest, "navcontainer");
   return true;   
}

function renderAlbum(inputAlbum, startPage) {

   var self = this;
   this.albumName = inputAlbum;
   this.pageSize = 12;
   this.thumbCont;
   this.centerCont;
   this.stageCont;

   this.currentAlbum;
   this.currentPhoto;
   this.currentPage = startPage;

   // Hide background for proper photo album display
   var section3 = document.getElementById('bg');
    section3.style.display = 'none';
   showMenu("inline");
   document.body.background = "resources/images/bkgnd.png";
   var strScript = "Requests/submitRequest.php";
   strScript = strScript + "?album=" + self.albumName;
   strScript = strScript + "&mode=navigation";

   // Make AJAX/JSON call to get the ablum OR get it from the cache
   var json1 = new jsChe(strScript, self);

   this.displayPhoto = function(photoNumber) {
      // Construct the Stage
      var stage;
      if (self.centerCont) {
         stage =  document.getElementById('stage');
         stage.innerHTML = "";
         
      } else {
         self.centerCont =  document.createElement('center');
         self.stageCont = document.createElement('div');
         document.body.appendChild(self.centerCont);

         var stage  = document.createElement('div');
         stage.setAttribute('className', "stage");
         stage.setAttribute('id', "stage"); 
         stage.className = "stage";
         self.centerCont.appendChild(stage);
      }

      var image = document.createElement('img');
      image.src = self.currentAlbum[photoNumber-1].source;
      image.id = 'stageImage';
      image.className = 'image';
      stage.style.height = image.height + "px";//"530px";
      stage.style.width =image.width + "px"; //"704px";
      if(this.albumName == "albumbio" && photoNumber == 1) {
         //image.src = "http://www.gps4mtb.com/sites/Hammerupload/resources/images/robbioblank.jpg";
         var busCard = document.createElement("div");    
         busCard.style.height = "150px";
         busCard.style.width = "310px";
         busCard.style.position = "absolute";
         busCard.style.top = "75px";
         busCard.style.left = "375px";
         busCard.style.textAlign = "center";
         busCard.innerHTML = "<font style='font-size: 25px; font-weight: bold;'>Rob Hammer</font><br/>Commercial Photographer<br/>Denver, CO<br/>email: <a href='mailto:info@robhammerphotography.com'>info@robhammerphotography.com</a><br/>phone: (858) 869-7573<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>Thank  you for viewing my work";
         stage.appendChild(busCard);
      }
      // stage.appendChild(image);
       stage.style.backgroundImage = "url(" + image.src + ")";
       var clear = document.createElement("div");
       clear.style.position = "absolute";
       clear.style.top = "0px";
       clear.style.left = "0px";
       clear.style.height = image.height;
       clear.style.width = image.width;
       stage.appendChild(clear);
   }

   this.showPhoto = function(photoNumber) {
      this.displayPhoto(photoNumber);
      // Redraw again to force a refresh.  This is a workaround for
      // Safari browswer bug that was distorting images of different sizes
      var browser = browserDetect();
      if(browser.browser != "Microsoft Internet Explorer") {
        setTimeout("displayPhoto(" + photoNumber + ")", 1);
      }
   }

   this.redrawThumbContainer = function() {
      if(self.thumbCont) {
         self.thumbCont.parentNode.removeChild(self.thumbCont);
      }
      self.thumbCont = document.createElement('div');
      self.thumbCont.className='navcontainer';
      self.thumbCont.setAttribute('id', 'navcontainer');
      //self.thumbCont.onmouseover = function() {showMenu("none");};
      //self.thumbCont.onmouseout  = function() {showMenu("inline");};
      document.body.appendChild(self.thumbCont);
   }

   this.redrawAlbum = function() {

      var pageStart = (this.currentPage - 1 ) * this.pageSize ;
      self.currentAlbum = gContext[self.albumName];

      var pageEnd;
      if (self.currentAlbum.length > pageStart + self.pageSize) {
         pageEnd = pageStart + self.pageSize;
      } else {
         pageEnd = self.currentAlbum.length;
      }

      // Draw arrow for previous page if needed
      if (pageStart > 0) {
         var nav;
         try {
            var navString = "<div onclick=\"renderAlbum(\'"  + self.albumName + "\', " + (self.currentPage - 1) + ")>" ;
            nav = document.createElement(navString);
         } catch(ex) {
            nav = document.createElement('div');
            nav.setAttribute("onclick", "renderAlbum('" + self.albumName + "', " + (self.currentPage - 1) + ")");
         }

         nav.innerHTML = '<br><img src="http://www.gps4mtb.com/sites/Hammerupload/resources/images/uparrow.jpg" height="25px" width="25px"/><br>';
         self.thumbCont.appendChild(nav);
      }

      for (self.currentPhoto = 0 ; self.currentPhoto < self.currentAlbum.length ; self.currentPhoto ++ ) {

         if(self.currentPhoto >= pageStart && self.currentPhoto < pageEnd) {
            // Construct the thumbnails - account for ie differences
            var nav;
            try {
               var navString = "<div onmouseover='showPhoto(" + self.currentAlbum[self.currentPhoto].id + ");'/>"
               nav = document.createElement(navString);
            } catch(ex) {
               nav = document.createElement('div');
               nav.setAttribute("onmouseover", "showPhoto(" + self.currentAlbum[self.currentPhoto].id + ");");
            }
            nav.innerHTML = '<img src="' + self.currentAlbum[self.currentPhoto].source + '" height="40px" width="40px"/>';
            self.thumbCont.appendChild(nav);
         }
      }

      // Draw arrow for next page if needed 
      if (pageEnd < self.currentAlbum.length) { 
         var nav;
         try {
            var navString = "<div onclick=\"renderAlbum(\'"  + self.albumName + "\', " + (self.currentPage + 1) + ")>" ;
            nav = document.createElement(navString);
         } catch(ex) {
            nav = document.createElement('div');
            nav.setAttribute("onclick", "renderAlbum('" + self.albumName + "', " + (self.currentPage + 1) + ")");
         }

         nav.innerHTML = '<br><img src="http://www.gps4mtb.com/sites/Hammerupload/resources/images/downarrow.jpg" height="25px" width="25px"/>';
         self.thumbCont.appendChild(nav);
      }

      if (self.currentAlbum.length > 0) {
         self.currentPhoto = pageStart;
         self.showPhoto(self.currentPhoto+1);
      }

   }

   this.drawPage = function() {
      self.redrawThumbContainer();
      self.redrawAlbum();
   }

   this.drawNextPage = function() {
      self.currentPage++;
      this.drawPage();
   }
}

function showMenu(strMode) {
   var menu = document.getElementById('menu');
   menu.style.display = strMode;
}