//
// function: fadeIn(imgId)
// this function provides the timing loop to control the rate at 
// which the fade occurs.  the rate has to slow down as the image
// opacity is increased in order to achieve the desired effect.
// smaller values of rate make the fade happen faster.
// rate = 10 is a good starting point
/*function fadeIn(imgId,rate) {
	var counter = 0;
	var opacStart = 0;
	var opacEnd = 100;

	for(i=opacStart; i<=opacEnd; i++) {
	  setTimeout('setOpacityById(' + i + ',"' + imgId + '")',(counter*rate));
		counter++;
	}

}*/

/** vars for fade functions **/
var n_fadeMin = 0;
var n_fadeMax = 100;
var n_fadeStep = 10;
var n_timeOut = 0.75; // fade rate
var n_fadeinCounter = 0;
var n_fadeoutCounter = 0;
var n_fadeinTimerId = 0;
var n_fadeoutTimerId = 0;
var b_busyFading = false;
/*****************************/

function fadeIn(eid,n_rate) {

  n_fadeinCounter += n_fadeStep;
  if(n_fadeinCounter <= n_fadeMax) {
    setOpacityById(n_fadeinCounter,eid);
    //n_timeOut = n_rate * n_fadeCounter;
    n_fadeinTimerId = window.setTimeout("fadeIn('" + eid + "'," + n_rate + ")",n_timeOut);
  }
  else {
    //alert("done");
    window.clearTimeout(n_fadeinTimerId);
    //alert("hello world");
    //b_busyFading = false;
  }
  
}

// this function sets an opacity value directly to an element by id
// note that it doesn't matter if you just set all of the possible settings
// at once without testing for browser.  no errors are produced
// as far as I can tell
function setOpacity(opacity,element) {
	//element = document.getElementById(imgId);
	element.style.opacity = opacity / 100;
	element.style.MozOpacity = opacity / 100;
	//element.style.KhtmlOpacity = opacity / 100;
	element.style.filter = "alpha(opacity=" + opacity + ")";
}


// variation of the above function that accepts an HTML id rather than the 
// object to be operated on
function setOpacityById(opacity,imgId) {
	element = document.getElementById(imgId);
	element.style.opacity = opacity / 100;
	element.style.MozOpacity = opacity / 100;
	//element.style.KhtmlOpacity = opacity / 100;
	element.style.filter = "alpha(opacity=" + opacity + ")";
}

var PageLoad = Class.create({
	
	initialize: function(sz_pageContainer) {
		this.sz_pageContainer = sz_pageContainer;
		this.helpers = new PageHelpers();		
		this.overOpac = 1;
		this.linkOpac = 0.75;
		this.loadingImage = null;
	},

  showLoading: function(sz_page) {

	  var n_width = 95;
	  var n_height = 41;
	  var n_pageWidth = document.body.clientWidth;
	  var n_left = ((n_pageWidth / 2) - (n_width / 2)) + "px";
	  var n_top = 200 + "px";
	  
	  switch(sz_page) {
	    case "viewer":
	      sz_loadingImage = "./images/loadingViewer.gif";
	      break;
	    default:
	     sz_loadingImage = "./images/loading2.gif";
	  }
	  
	  this.loadingImage = document.createElement("img");
	  
	  this.loadingImage.style.top = n_top;
	  this.loadingImage.style.left = n_left;
	  this.loadingImage.style.position = "absolute";
	  this.loadingImage.setAttribute("src",sz_loadingImage);
	  this.loadingImage.setAttribute("border",0);
	  this.loadingImage.setAttribute("id","loading_image");
	  
	  document.body.appendChild(this.loadingImage);
  	
  },
  
  killLoading: function() {
  	if(this.loadingImage) {
      $(this.loadingImage).style.display = "none";
  	}
  },
  
  fadeInPage: function() {

    this.killLoading();

    $(this.sz_pageContainer).style.display = "block";
    //this.helpers.fadein(this.sz_pageContainer,.5,180);
    //if(navigator.appVersion.indexOf("Win") >= 0 || navigator.appVersion.indexOf("Mac") >= 0) {
      fadeIn(this.sz_pageContainer,2);
    //}
    //else {
    //  setOpacityById(100,this.sz_pageContainer);
    //}
  	
  },

	home: function() {
		var ar_linkid = ['art','photos','contact','store','design'];

    this.fadeInPage();
		
		for(i = 0; i < ar_linkid.length; i++) {
			
			sz_id = "home_" + ar_linkid[i];

      $(sz_id).setOpacity(this.linkOpac);

			$(sz_id).onmouseover = function() {
				this.setOpacity(1);
			}
			
			$(sz_id).onmouseout = function() {
				this.setOpacity(0.75);
			}
			
		}
		
	},
	
	photos: function() {
	
	  var n_images = 6;

    // fade in the page
    this.fadeInPage();	  
	  
	  for(i = 0; i < n_images; i++) {
	    
	    // create ids
	    sz_thumbId = "IMAGE" + (i+1);
	    sz_descId = "IMAGE" + (i+1) + "_DESC";
	    thumbPos = $(sz_thumbId).cumulativeOffset();
	    
	    $(sz_thumbId).setAttribute("class","menuOpac");
	    $(sz_thumbId).style.cssText = "border: 1px solid #999999;";
	    
	    // set opacity and set position
	    $(sz_descId).setOpacity(0.8);
	    $(sz_descId).style.visibility = "hidden";
	    $(sz_descId).style.position = "absolute";
	    $(sz_descId).style.top = thumbPos.top + "px";
	    $(sz_descId).style.left = thumbPos.left + "px";
	    
	    // set opacity of the thumbnail
	    //$(sz_thumbId).setOpacity(this.linkOpac);
	    
	    // set the mouseover event for this thumbnail
	    $(sz_thumbId).onmouseover = function() {
	      //this.setOpacity(this.overOpac);
	      $(this.id + "_DESC").style.visibility = "visible";
	    }
	    // set the mouseout function
	    $(sz_thumbId).onmouseout = function() {
	      //this.setOpacity(this.linkOpac);
	      $(this.id + "_DESC").style.visibility = "hidden";
	    }
	  }		
	},
	
	art: function() {
		
		//var ar_linkid = ["sketches","oils","prints"];
		
		this.fadeInPage();
		
		/*for(i = 0; i < ar_linkid.length; i++) {
			
			sz_id = ar_linkid[i];
			
			$(sz_id).onmouseover = function() {
				
				this.setOpacity(1);
			}

      $(sz_id).onmouseout = function() {
        
        this.setOpacity(0.75);
      }
			
		}*/
		
	}
	
});

var PageHelpers = Class.create({
	
	initialize: function() {
		//this.doc = e_doc;
	},

  fadein: function(sz_id,n_duration,n_frameRate) {
	  
	  //alert($(sz_id).innerHTML);
	  
	  var n_steps = n_frameRate;
	  var n_delayTime = (n_duration * 1000) / n_steps;
	  var n_opacityStep = 1 / n_steps;
	
	  for(i = 0; i < n_steps; i++) {
	    sz_fun = "Element.setOpacity('" + sz_id + "'," + (i*n_opacityStep) + ")";
	    //alert(sz_fun);
	    setTimeout(sz_fun,n_delayTime*(i/2));
	  }
	  // make sure it's fully in
	  $(sz_id).setOpacity(1);
	},
	
	fadeout: function(sz_id,n_duration,n_frameRate) {

    var n_steps = n_frameRate;
    var n_delayTime = (n_duration * 1000) / n_steps;
    var n_opacityStep = 1 / n_steps;
  
    for(i = 0; i < n_steps; i++) {
      sz_fun = "Element.setOpacity('" + sz_id + "'," + (i*n_opacityStep) + ")";
      //alert(sz_fun);
      setTimeout(sz_fun,n_delayTime*(i/2));
    }
    // make sure it's fully in
    $(sz_id).setOpacity(0);
		
	}
	
});


////
// this here is the image swap code
function overImg(o_img) {
  ////
	// find image extension
	sz_ext = o_img.src.substr(o_img.src.length-4,4);	
  ////
	// replace the source path with the path of the highlighted
	// image
  o_img.src = "./images/" + o_img.name + "_over" + sz_ext;
}
function outImg(o_img) {
  ////
	// find image extension
	sz_ext = o_img.src.substr(o_img.src.length-4,4);	
  ////
	// replace the highlighted image with the original image
  o_img.src = "./images/" + o_img.name + sz_ext;
}
function preloadMenu() {
  ////
	// setup array of image objects
	ar_images = new Array;
	for(i=0;i<6;i++) {
	  ar_images[i] = new Image;
	}
	////
	// load each image object with the menu's "over" images
  ar_images[0].src = "./images/home_over.gif";
  ar_images[1].src = "./images/events_over.gif";
  ar_images[2].src = "./images/art_over.gif";
  ar_images[3].src = "./images/photos_over.gif";
  ar_images[4].src = "./images/design_over.gif";
  ar_images[5].src = "./images/contact_over.gif";
}

// a full startup function so I can add in other things if necessary
// like other roll-over preloads or whatnot
function pageStartup() {
  preloadMenu();
}

function openStore(sz_options) {
  
  nHeight = 640;
  nWidth = 920;

  ///
  // depending on which broswer is being used i have to use different
  // variable names for the top left corner coordinates of the browser.
  var szApp = navigator.appName;
  if(szApp.indexOf("Microsoft") != -1) {
    nLeft = window.screenLeft;
    nTop = window.screenTop;
  }
  else {
    nLeft = window.screenX;
    nTop = window.screenY;
  }
  
  // figure out where to put it
  var nLeftPosition = nLeft + (document.body.clientWidth / 2) - (nWidth / 2);
  var nTopPosition = nTop + (document.body.clientHeight / 2) - (nHeight / 2);
  
  var szWindowOptions = "width=" + nWidth + "," + 
    "height=" + nHeight + "," + 
    "scrollbars=yes,status=no,toolbar=no,menubar=no,resizable=no," + 
    "left=" + nLeftPosition + ",top=" + nTopPosition;
  
  szPage = "index.php?div=store&" + sz_options;

  window.open(szPage,"viewer",szWindowOptions);  
  
}

function openView(szPage) {

	nHeight = 480;
	nWidth = 640;
	
  ///
	// depending on which broswer is being used i have to use different
	// variable names for the top left corner coordinates of the browser.
  var szApp = navigator.appName;
  if(szApp.indexOf("Microsoft") != -1) {
    nLeft = window.screenLeft;
    nTop = window.screenTop;
  }
  else {
    nLeft = window.screenX;
    nTop = window.screenY;
  }
  
  // figure out where to put it
  var nLeftPosition = nLeft + (document.body.clientWidth / 2) - (nWidth / 2);
  var nTopPosition = nTop + (document.body.clientHeight / 2) - (nHeight / 2);
  
  var szWindowOptions = "width=" + nWidth + "," + 
    "height=" + nHeight + "," + 
    "scrollbars=no,status=no,toolbar=no,menubar=no,resizable=no," + 
    "left=" + nLeftPosition + ",top=" + nTopPosition;
  
  szPage = "./templates/" + szPage + "/" + szPage + ".htm";

  window.open(szPage,"viewer",szWindowOptions);



  //szOptions = "height=640,width=780,scrollbars=no,status=no,toolbar=no,menubar=no,resizable=no";
  //window.open("viewer.php?offset=0&type=art&gallery=" + szGallery,"viewer",szOptions);
}

var viewerWindow = null;

function openViewer(cat,album) {

  var szBrowser = navigator.appName;
  
  /*if(szBrowser.indexOf("Microsoft") != -1) {
    nTop = window.screenTop;
    nLeft = window.screenLeft;
  }
  else {
    nTop = window.screenY;
    nLeft = window.screenX;
  }*/


	/*wHeight = document.body.clientHeight - 20;
  wWidth = document.body.clientWidth - 20;*/

  browserSoft = navigator.appName;
  
  sz_userAgent = navigator.userAgent;
  
  ar_browsers = [];

  ar_browsers['firefox'] = {x:1132, y:667};
  ar_browsers['ie'] = {x:1132, y:668};
  ar_browsers['safari'] = {x:1137, y:675};

  // determine browser
  
  //alert(navigator.userAgent);
  
  if(/firefox/i.test(sz_userAgent)) {
    wHeight = ar_browsers['firefox'].y;
    wWidth = ar_browsers['firefox'].x;
  }
  else if(/safari/i.test(sz_userAgent)) {
    wHeight = ar_browsers['safari'].y;
    wWidth = ar_browsers['safari'].x;    
  }
  else if(/msie/i.test(sz_userAgent)) {
    wHeight = ar_browsers['ie'].y;
    wWidth = ar_browsers['ie'].x;    
  }
  

	/*wWidth = 1132;
	if(browserSoft.indexOf("Microsoft") > -1) {
	  wHeight = 667;
	}
  else {
    wHeight = 665;
  }*/
  

  nLeft = (screen.availWidth / 2) - (wWidth / 2);
  nTop = (screen.availHeight / 2) - (wHeight / 2);
	
	if(nTop < 0) {
	  nTop = 0;
	}
	
	if(nLeft < 0) {
	  nLeft = 0;
	}

	/*wWidth = 900;
	if(screen.availWidth < wWidth) 
		wWidth = screen.availWidth-10;
	
	wHeight = 700;
	if(screen.availHeight < wHeight) 
		wHeight = screen.availHeight-10;*/

  sWindowOptions = "left=" + nLeft + ",top=" + nTop + ",location=no,height=" 
		+ wHeight + ",width=" + wWidth;

	viewerWindow = window.open("viewer.php?section=" + cat + "&album_id=" + album,"viewer",sWindowOptions);
}

////
// handler for the archive dropdown used on the photos page
function dropdownHandler(oDropdown) {
  // get the selected photo album name from the dropdown
	var album = oDropdown.options[oDropdown.selectedIndex].value;
	// reset the dropdown to the first selection
	oDropdown.selectedIndex = 0;
	// open the viewer
	openViewer("photos",album);
}