window.onload = galleryLoad;

var galleries;
var inAnimation = false;
var currentGallery = "Outdoors";
var currentPage = 0;
var galleryImageE;
var loadingTimeout; 
var shadeE;

function galleryLoad() {
  loadXMLDoc("./API/pictureGallery.php", null, gallerySetup);
}

function gallerySetup(){
  if (req.readyState == 4 && req.status == 200){
    
    galleries = eval( "(" + req.responseText + ")" );

    var tmp = document.location.search.substring(1).split("&");
    var tmpImg = null;
    for (var i=0; i < tmp.length; i++){
      if(tmp[i].split("=")[0] == "show" || tmp[i].split("=")[0] == "pg"){
        currentGallery = tmp[i].split("=")[1];
      } else if (tmp[i].split("=")[0] == "img"){        
        tmpImg = tmp[i].split("=")[1];
      }
    }
   
    if (tmpImg){
      for (var i=0; i < galleries[currentGallery].length; i++){
        if (galleries[currentGallery][i]["ID"] == tmpImg){
          currentPage = i;
	}
      }
    }   

    var galleryDisplayE = document.getElementById('galleryDisplay');
    var loadingE = document.createElement('div');
    loadingE.id = "loading";
    loadingE.innerHTML = "Loading...";
    loadingE.style.display = "none";

    shadeE = document.createElement('div');
    shadeE.id = "shade";
    shadeE.style.display = "none";
    shadeE.style.opacity = 0;
    shadeE.style.filter = "alpha(opacity=0);";
    galleryDisplayE.appendChild(shadeE);
    galleryDisplayE.appendChild(loadingE);

    var prev = document.getElementById("prevPic");
    var next = document.getElementById("nextPic");

    if(prev) prev.onclick = loadPic;
    if(next) next.onclick = loadPic;

    galleryImageE = document.getElementById('galleryImage');

    var el = document.getElementById('moreInfo');
    el.onclick = showHideMoreInfo;

    el = document.getElementById('showThumbs');
    el.onclick = showFullGallery;

    el = document.getElementById('about_link');
    el.onclick = function (){ return loadPage("about"); };

    el = document.getElementById('contact_link');
    el.onclick = function (){ return loadPage("contact"); };
 
    var e = document.getElementById("galleryInfo");
    if(typeof e.style.filter === 'undefined' ){
      e.className = "pngTransBG";
    }

    if( currentGallery == "contact" ){ 
      InputsChanged();
      el = document.getElementById('submit');
      el.onclick = sendContact;
    }

    preloadImages();
  }
}

var imageObj = new Image();

function preloadImages(){
  imageObj.src = "./images/trans_75.png";
  imageObj.src = "./images/logoWhite2.png";
  imageObj.src = "./images/arrow.png";
  imageObj.src = "./images/arrows.png";

  for ( i in galleries ) {
// Breaks the animation
//    preloadImagesWorker(i, 0);
  }
}

function preloadImagesWorker(i, j){
  imageObj.src = galleries[i][j].src;
  j++;
  if (j < galleries[i].length){
    setTimeout( "preloadImagesWorker('"+i+"', "+j+");", 300);
  }
}

function loadPage(page){
  var e = document.getElementById(currentGallery + "_link");
  e.parentNode.className = "";
  currentGallery = page;
  var e = document.getElementById(currentGallery + "_link");
  e.parentNode.className = "selected";
  fadeImageStart(1.0, 0.15,loadPageContent);
  return false;
}

function loadPageContent(){
  loadingTimeout = setTimeout(showLoading, 450);
  loadXMLDoc("./API/page.php", "pg="+currentGallery, pageSetup);
}

function pageSetup(){
  if (req.readyState == 4 && req.status == 200){
    showContent("pageContent");
    var el = document.getElementById('pageContent');
    el.innerHTML = req.responseText;
    if( currentGallery == "contact" ){ 
      InputsChanged();
      el = document.getElementById('submit');
      if (el) el.onclick = sendContact; 
    }
    fadeImageStart(0.0, -0.04);
  }
}

function loadThumb(e){
  var targ;
  if (!e) var e = window.event;
  if (e.target) targ = e.target;
  else if (e.srcElement) targ = e.srcElement;

  if (targ.className && targ.className != "") {
    currentPage = parseInt(targ.className);
    setTimeout(function() { fadeImageStart(1.0, 0.15, loadThumbCallback); }, 0);  
  }
}

function loadThumbCallback(){
    showPic();
}

function loadPic(e){
  if (inAnimation){ return false; } // Quick clicking so fast!

  var targ;
  if (!e) var e = window.event;
  if (e.target) targ = e.target;
  else if (e.srcElement) targ = e.srcElement;

  if (!targ.search) targ = targ.parentNode;
  if (!targ.search) return true;

  if(targ.id == "nextPic" && currentPage + 1 < galleries[currentGallery].length) currentPage++;
  if(targ.id == "prevPic" && currentPage > 0 ) currentPage--;

  return showPic();
}

function showPic(){
  var prev = document.getElementById("prevPic");
  var next = document.getElementById("nextPic");
  var prevPH = document.getElementById("prevPH");
  var nextPH = document.getElementById("nextPH");
  prev.style.display = (currentPage > 0 ? "block" : "none");
  prevPH.style.display = (currentPage <= 0 ? "block" : "none");
  next.style.display = ((currentPage + 1) < galleries[currentGallery].length ? "block" : "none");
  nextPH.style.display = ((currentPage + 1) >= galleries[currentGallery].length ? "block" : "none");	  

  prev.href = (currentPage > 0 ? "?show=" + currentGallery + "&img=" + galleries[currentGallery][currentPage - 1].ID : "" );
  next.href = ((currentPage + 1) < galleries[currentGallery].length ? "?show=" + currentGallery + "&img=" + galleries[currentGallery][currentPage + 1].ID : "" );

  var moreInfo = document.getElementById("moreInfo");
  moreInfo.href = "?show=" + currentGallery + "&img=" + galleries[currentGallery][currentPage].ID + "&info";

  setTimeout(function() { fadeImageStart(1.0, 0.15, insertPicture); }, 0);  
  return false;
}

function loadGallery(gal){
  if (inAnimation){ return false; } // Quick clicking so fast!

  var e = document.getElementById(currentGallery + "_link");
  e.parentNode.className = "";
  currentGallery = gal;
  e = document.getElementById(currentGallery + "_link");
  e.parentNode.className = "selected";

  e = document.getElementById("showThumbs");
  e.href = "?show=" + currentGallery + "&thumbs";

  if (currentPage == -1){
    return showFullGallery();
  } else {
    currentPage = 0;  
    return showPic();
  }
}

function insertPicture(){
  var imageNode = galleries[currentGallery][currentPage];

  loadingTimeout = setTimeout(showLoading, 450);
   
  var imageE = document.getElementById("imageE");    
  imageE.onload = function() { fadeImageStart(0, -0.04); };
  imageE.src = imageNode.Image;

  var e = document.getElementById("year");
  e.innerHTML = imageNode.Year;

  e = document.getElementById("imageTitle");
  e.innerHTML = imageNode.Title;

  e = document.getElementById("imageDesc");
  if (imageNode.Description && imageNode.Description != ""){ 
    e.style.display = "block";
    e.innerHTML = imageNode.Description;
  } else {
    e.style.display = "none";
  }

  e = document.getElementById("print");
  if (imageNode.Print && imageNode.Print != ""){
    e.innerHTML = "<a href=\"" + imageNode.Print + "\" >Print Avaliable</a>";
    e.style.display = "block";
  } else {
    e.style.display = "none";
  }

  showContent("galleryImage");

}

function showHideMoreInfo(){
  var moreInfoE = document.getElementById('moreInfo');
  var galleryInfoE = document.getElementById('galleryInfo');
  if( galleryInfoE.style.display == "none" ){
    moreInfoE.innerHTML = "Hide Information";
    galleryInfoE.style.display = "block";
  } else {
    moreInfoE.innerHTML = "Photo Information";
    galleryInfoE.style.display = "none";
  }  
  return false;
}

function showFullGallery(){
  if (inAnimation){ return false; } // Quick clicking so fast!

  fadeImageStart(1.0, 0.15, showFullGalleryCallback);
  return false;
}

function showFullGalleryCallback(){
  loadingTimeout = setTimeout(showLoading, 450);

  var e = document.getElementById('thumbnails');  
  var imageObj;
  e.innerHTML = "";
  currentPage = -1;

  for(j=0; j < galleries[currentGallery].length; j++){
    imageObj = new Image();
    imageObj.src=galleries[currentGallery][j].Thumb;
    imageObj.className = j;
    imageObj.onclick = loadThumb;
    e.appendChild(imageObj);
  }

  showContent("galleryControls");

  setTimeout( function () {fadeImageStart(0, -0.04);}, 500);

}

function showLoading(){
  var loadingE = document.getElementById("loading");
  loadingE.style.display = "block";
}

var fadeStatus = 0;
var fadeHandicap = 1;
var fadeStart = null;
function fadeImageStart(goal, step, callback){  
  clearTimeout(loadingTimeout);
  var loadingE = document.getElementById("loading");
  loadingE.style.display = "none";
  if (shadeE.style.display == "none"){ shadeE.style.display = "block" }
  if (fadeStatus == 2){ step *= fadeHandicap; }
  fadeImage(goal, step, callback);
}

function fadeImage(goal, step, callback) {
  if (!inAnimation) inAnimation = true;
  if (fadeStatus == 0){
    fadeStatus = 1; // Benchmarking
    fadeStart = (new Date()).getTime();
  } else if (fadeStatus == 1){
    var delta = (new Date()).getTime() - fadeStart;
    if (delta > 50) { //40 ms + 20% buffer
      fadeHandicap = delta / 40;
    }
    step *= fadeHandicap;
    fadeStatus = 2; // Handicap set
  } 
  var newOpacity = parseFloat(shadeE.style.opacity) + step;
  if (isNaN(newOpacity)) { newOpacity = 1 + step;  }
  if (step > 0 && newOpacity > goal || step < 0 && newOpacity < goal){
    if(goal <= 0){  shadeE.style.display = "none"; } 
    shadeE.style.opacity = goal;
    shadeE.style.filter = "alpha(opacity=" + Math.round((goal)*100) + ");";
    inAnimation = false;
    if (callback) callback();
  } else {
    shadeE.style.opacity = newOpacity;
    shadeE.style.filter = "alpha(opacity=" + Math.round((newOpacity)*100) + ");";
    setTimeout( function(){fadeImage(goal, step, callback);}, 40); // Timeout of 40 is 25 fps
  }
}


function showContent(id){
  var pageHolders = ['galleryControls', 'galleryImage', 'pageContent'];

  for (var i = 0; i < pageHolders.length; i++){
    if(pageHolders[i] == id){
      e = document.getElementById(id);
      e.style.display = 'block';
    } else {
      e = document.getElementById(pageHolders[i]);
      e.style.display = 'none';
    }
  } 

  e = document.getElementById("galleryImageControls");
  if(id == "galleryImage"){
    e.style.display = 'block';
  } else {
    e.style.display = 'none';
  }
}


function InputsChanged(){
  var name = document.getElementById('username');
  var email = document.getElementById('usermail');
  var message = document.getElementById('message');
  var submit = document.getElementById('submit');

  if (name && email && message && submit){
    if (!name.onkeyup){
      name.onkeyup = InputsChanged;
      email.onkeyup = InputsChanged;
      message.onkeyup = InputsChanged;

      name.onchange = InputsChanged;
      email.onchange = InputsChanged;
      message.onchange = InputsChanged;
    } 

    if (name.value == "" || email.value == "" || message.value == "" || email.value.indexOf("@") < 0 ){
      submit.disabled = true;
    } else {
      submit.disabled = false; 
    }
  }
}

function sendContact(){
  var name = document.getElementById('username');
  var email = document.getElementById('usermail');
  var message = document.getElementById('message');

  fadeImageStart(1.0, 0.15, function(){
    loadXMLDoc("./API/mailContact.php", "username="+name.value+"&usermail="+email.value+"&message="+message.value, pageSetup, true); 
  });

  return false;
}

var req;
function loadXMLDoc(url, queryString, callback, isPost) {
  if (!isPost) isPost = false;

  if (window.XMLHttpRequest) {
    req = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
    req = new ActiveXObject("Microsoft.XMLHTTP");
  }

  if (req) {
    req.onreadystatechange = callback;

    if(isPost) {    
      req.open("POST", url, true);
      req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
      req.setRequestHeader("Content-length", queryString.length);
      req.setRequestHeader("Connection", "close");
      req.send(queryString);
    } else {
      req.open("GET", url + "?cashebust=" + (new Date()).getTime() + (queryString ? "&" + queryString : ""), true);
      req.send(null);
    }
  }
}