/*--------------------------------------------------------------------------------------*/
/* This is an integrated website to allow users to quickly and easily produce 			*/
/* a website to meet some specific requirements:										*/
/*      - that there be multiple galleries of abour 6-8 images							*/
/*      - within a gallery - by scrolling over an index the main image is				*/
/*          smoothly changed into the scrolled over image.								*/
/*      - that the sight content including number of images and galleries				*/
/*          be trivially edited by a user that is not necessarily familiar with			*/
/*          web design.																	*/
/*																						*/
/*   This site was designed by Brian Boesch (brian at boesch dot com) 					*/
/*      and is copyrighted 2010 - all rights reserved.									*/
/*      if you like this website, feel free to contact the above email					*/
/* -------------------------------------------------------------------------------------*/

// The following three functions support full screen mode
// ********* BB **********************
function debug(txt) {
   //document.getElementById("namediv").innerHTML = txt;
}


/*----------------------------------------------------------------*/
/* functions used in the javascript                               */
/*----------------------------------------------------------------*/
function percentFromWidth(element, desiredWidth)  {
	var w = element.width;
	return 100*(desiredWidth/w);
}
function percentFromHeight(element, desiredHeight)  {
	var h = element.height;
	return 100*(desiredHeight/h);
}


function insertGoogleTag() {
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-16279320-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
}
function isArray(obj) {
   if (obj.constructor.toString().indexOf("Array") == -1)
      return false;
   else
      return true;
}

/*----------------------------------------------------------------*/
/* bbGallery -  object to hold the documents for a page           */
/*----------------------------------------------------------------*/
var countDown = 4;
var bbGallery = Class.create( {

	initialize: function(options) {
		this.images = new Array();	// images array contains,  title, url, description, currentOpacity
		this.selectedImageNum = 0;
		this.msBetweenSteps = 10;
		this.opacityStep = 0.04;
		this.currentImageSet = "";
		this.mainDivIDBase = "galleryDiv_";
		
		// the following are used for the full screen view mode.
		this.fsViewOpacity = 0;
		this.fsViewTargetOpacity = 0;
	
		this.debugCounter = 0;
		this.timeOfImageLoadStart = 0;
	},
	
	// doInterval is used for internal use by bbGalery
	// you do not call it yourself
	doInterval: function() {
		// for this.selected = increase opacity towards 1.0
		// for each other element decrease opacity towards 0.0
		// if nothing more to do, clearInterval
		// alert("START INTERVAL");
		var didSomething = 0;
		var changedImage = "";
		for(i = 0; i < this.images.length; i++) {
			var imageData = this.images[i];
			var theImageDiv  = $(this.mainDivIDBase + i);
		    // make this work on IE on elements without 'layout'
			if (Prototype.Browser.IE && (!theImageDiv.currentStyle.hasLayout)) theImageDiv.setStyle({zoom: 1});

			changedImage = changedImage + "**checkimage " + i + " O=" + imageData.opacity + " ";
			if (i==this.selectedImageNum) {
				changedImage = changedImage + "S" + imageData.opacity + " ";
				if (imageData.opacity < 1) {
					changedImage = changedImage + "! ";
					didSomething++;
					imageData.opacity = imageData.opacity + this.opacityStep;
					if(imageData.opacity >= 1) imageData.opacity = 1;

					Element.show(theImageDiv);
					changedImage = changedImage + '; raised ' + i + ' to: ' + imageData.opacity;
				}
			} else {
				if (imageData.opacity > 0) {
					didSomething++;
					imageData.opacity -= this.opacityStep;
					if (imageData.opacity <= 0) {
						imageData.opacity = 0;
						Element.hide(theImageDiv);		// drive zer opacity objects to hidden
					}					
					changedImage = changedImage + '; lowered ' + i + ' to: ' + imageData.opacity;
				}
			}
			Element.setOpacity(theImageDiv, imageData.opacity);
		}
		if (didSomething > 0) {
			//alert('selectedImage = ' + this.selectedImageNum + ' didSomething = ' + didSomething + ' ' + changedImage);
			if (countDown > 0) this.setRepeat();
		}
	},

	setRepeat:function() {
		//alert("set timeout");
		window.setTimeout("doRepeat();", this.msBetweenSteps );
	},	
		// doInterval is used for internal use by bbGalery
	// you do not call it yourself
	doFullScreenInterval: function() {
		// This is the interval program for the full screen image 
		
		this.debugCounter++;
		
		var didSomething = 0;
		// make sure we are OK to set opacitiy
		
		if (Prototype.Browser.IE && (!$("fullScreenDiv").currentStyle.hasLayout)) $("fullScreenDiv").setStyle({zoom: 1});
		if (this.fsViewOpacity < this.fsViewTargetOpacity) {
			this.fsViewOpacity += this.opacityStep;
			if (this.fsViewOpacity > this.fsViewTargetOpacity) this.fsViewOpacity = this.fsViewTargetOpacity;
			didSomething = 1;
			if (this.fsViewOpacity > 0) Element.show($("fullScreenDiv"));
			setOpacity("fullScreenDiv", this.fsViewOpacity);
		} else 	if (this.fsViewOpacity > this.fsViewTargetOpacity) {
			this.fsViewOpacity -= this.opacityStep;
			if (this.fsViewOpacity < this.fsViewTargetOpacity) this.fsViewOpacity = this.fsViewTargetOpacity;
			didSomething = 1;
			setOpacity("fullScreenDiv", this.fsViewOpacity);
			if(this.fsViewOpacity <= 0) Element.hide($("fullScreenDiv"));
		}

		
		debug(" Int= " + this.debugCounter + " did=" + didSomething + " opc=" + this.fsViewOpacity);

		if (didSomething > 0) {
			this.setFullScreenRepeat();
		}
	},

	setFullScreenRepeat:function() {
		//alert("set timeout");
		window.setTimeout("doFullScreenRepeat();", this.msBetweenSteps);
	},
	
	selectImage: function(imageNum) {
		if (imageNum == this.selectedImageNum) return false;
			
		_gaq.push(['_trackEvent', 'images', 'LeaveImage', this.images[this.selectedImageNum].name]);
		_gaq.push(['_trackEvent', 'images', 'ShowImage', this.images[imageNum].name]);
		
		this.selectedImageNum = imageNum;
		this.setRepeat();
		return false;
	},

	addImage: function(name, title, description) {
		var l = this.images.length;
		var opacity = 0.0;
		if (l == 0) opacity = 1.0;
		this.images[l] ={"title":title, "name":name, "description":description, "opacity": opacity};
	},

	
	getImageID: function(imageNum) {
		return (this.images[imageNum]).id;
	},
	getImageTitle: function(imageNum) {
		return (this.images[imageNum]).title;
	},
	getImageDescription: function(imageNum) {
		return (this.images[imageNum]).description;
	},

	imageCount: function() {
		return this.images.length;
	},
	
	
	generateImageDivSet: function()  {
		
		for(i = 0; i < this.images.length; i++) {
			var image = this.images[i];
			
			// build the data in strings so I can see them if I need to... too hard if I write it byte at a time
			var s = '<div class="galleryDiv" id="' + this.mainDivIDBase + i + '"';
			if (image.opacity == 0) s = s + 'style="display:none"';
			s = s + '><table class="galleryTable">';
			if (this.images[i].title != null) s=s+'<tr><td><span class="galleryPixTitle">' + this.images[i].title + '</span></td></tr>';
			s = s + '<tr><td><img src="images/' + this.currentImageSet + '/display/' + this.images[i].name +  '"  onclick="doFullScreenImage()" ></img></td></tr>';
			if (this.images[i].description != null) s = s + '<tr><td><span class="galleryPixDescription">' + this.images[i].description + '</span></td></tr>';
			s = s + '</table></div>';
			document.write(s);
		}
	},
	
	
	generateImageTable: function(firstThumb, lastThumb, thumbsPerRow)  {
		document.write('<table class="thumbTable"><tr class="thumbRow" >');
		    var tr = thumbsPerRow;
			for(i = firstThumb; ((i < this.images.length) && (i < lastThumb)); i++) {
				if ((i != 0) && (i % thumbsPerRow) == 0 ) document.write('</tr><tr class="thumbRow">');
				document.write('<td class="thumbCol" ><img  src="images/' + this.currentImageSet + '/thumbnail/' + this.images[i].name +  '" onMouseOver="doSelectImage(' + i + ')" onclick="doFullScreenImage()" ></img></td>');
			}
		document.write('</tr></table>');
		// alert("DONE WITH ROW");
	}

});

/*  WINDOW SIZE GETTER OBJECT 
*/
var windowSize = Class.create( {
	initialize: function(options) {
		this.width = 0;
		this.height = 0;
		if( typeof( window.innerWidth ) == 'number' ) {
			//Non-IE
			this.width = window.innerWidth;
			this.height = window.innerHeight;
		} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
			//IE 6+ in 'standards compliant mode'
			this.width = document.documentElement.clientWidth;
			this.height = document.documentElement.clientHeight;
		} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
			//IE 4 compatible
			this.width = document.body.clientWidth;
			this.height = document.body.clientHeight;
		}
	},
	
	// doInterval is used for internal use by bbGalery
	// you do not call it yourself
	doAlertToShowSizes: function() {
		window.alert( 'Width = ' + this.width + ' Height = ' + this.height );
	},

	getWidth: function() {
		return this.width;
	},
	
	getHeight: function() {
		return this.height;
	},

});






/*----------------------------------------------------------------*/
/* navigation -  object to hold the inter page navigation data    */
/*----------------------------------------------------------------*/
var NavigationHolder = Class.create( {

	initialize: function(options) {
		this.pages= new Array();
	},
	
	addPage: function(pageName, imgLink, title) {
		var l = this.pages.length;
		this.pages[l] ={"title":title, "pageName":pageName, "imgLink":imgLink};
	},

	clickableImagesVertical: function () {
		for (i = 0; i<this.pages.length; i++) {
			document.write('<div class="topicSelector">')
			var pp = this.pages[i].pageName;
			if (pp.toLowerCase().indexOf("http:") == 0 ) {
				document.write('<a href="' + this.pages[i].pageName + '">');
			} else {
				document.write('<a href="gallery.htm?' + this.pages[i].pageName + '">');
			}
			document.write('<img src="' +this.pages[i].imgLink + '" align="top" border="0">')
			document.write('</a></div><div class="topicSelectorVSpacer"></div>');
			
		}
	 },
	 
	 clickableTextVertical: function () {
		for (i = 0; i<this.pages.length; i++) {
			p = this.pages[i].pageName;
			document.write('<div class="topicSelectorTxtDiv">');

 		    if (this.currentImageSet == p) {
				//alert("Found " + this.currentImageSet);
			   document.write('<span class="topicSelectorCurrentTxt">' + this.pages[i].title + '</span></div>');
			} else {
			   

			   ss = 'gallery.htm?' + p;
  			   if (p.toLowerCase().indexOf('http:') >= 0) ss = p;
			   document.write('<a href="' + ss + '" class="topicSelectorTxt">' + this.pages[i].title + '</a></div>');
			}
			document.write('<div class="topicSelectorVSpacerText"></div>');
		}
	 }

});

/* ******************************************************************
*   Misc declarations and functions used in the html or in jason.js
*********************************************************************/
					
insertGoogleTag();

var navigation = new NavigationHolder();
var galleryData = new bbGallery();

galleryData.currentImageSet = location.search.substring(1,location.search.length);

// THE FOLLOWING DEFINE SOME BASIC FUNCTIONS CALLED IN HTML


function doSelectImage(imageNum) {
	galleryData.selectImage(imageNum);
}
function doRepeat() {
	galleryData.doInterval();
}


function setOpacity(id, newOpacity) {
	var theObj  = $(id);
	// make this work on IE on elements without 'layout'
	if (Prototype.Browser.IE && (!theObj.currentStyle.hasLayout)) theObj.setStyle({zoom: 1});
	Element.setOpacity(theObj, newOpacity);
}



function doFullScreenImage() {
	var d = new Date();
	galleryData.timeOfImageLoadStart = d.getTime();
	var txt = '<img id="fsImage" class="fsImagePix" onload="javascript:fsImageOnLoad();" src="images/' + galleryData.currentImageSet + '/fullscreen/' + galleryData.images[galleryData.selectedImageNum ].name +  '" ></img>';
    document.getElementById("fullScreenDiv").innerHTML = txt ;  // start by setting the image to load
	if (Prototype.Browser.IE && (!$("mainView1").currentStyle.hasLayout)) $("mainView1").setStyle({zoom: 1});
	if (Prototype.Browser.IE && (!$("mainView2").currentStyle.hasLayout)) $("mainView2").setStyle({zoom: 1});
	if (Prototype.Browser.IE && (!$("copyrighttxt").currentStyle.hasLayout)) $("copyrighttxt").setStyle({zoom: 1});
	
	setOpacity("copyrighttxt", 0);	
	setOpacity("mainView1", 0);
	setOpacity("mainView2", 0);
	
}

function closeFullScreenImage() {		// part of full screen image fade in out
	galleryData.fsViewTargetOpacity = 0;
	//galleryData.fsViewOpacity = 0;
	setOpacity("mainView1", 1);
	setOpacity("mainView2", 1);
	setOpacity("copyrighttxt", 1);
    galleryData.doFullScreenInterval();
}
function doFullScreenRepeat() {			// part of full screen image fade in out
	galleryData.doFullScreenInterval();
}




function fsImageOnLoad() {
	var d = new Date();
	if (d.getTime() - galleryData.timeOfImageLoadStart  < 500) {
		window.setTimeout("fsImageOnLoad();", 100 );
		return;
	}
	var ws = new windowSize();
	//var containerWidth = ws.width;
	//var containerHeight = ws.height;
	galleryData.fsViewTargetOpacity = 1;
    galleryData.doFullScreenInterval();
}

// THE FOLLOWING IS USED JUST TO CREATE THE DATABASE OF IMAGES

function addPageToSite(pageName, indexImage, displayName) {
	navigation.addPage(pageName, indexImage, displayName);
}


function addImage(pageName, imageName, imageTitle, imageDescription) {
	if (pageName != galleryData.currentImageSet) return;
	galleryData.addImage(imageName, imageTitle, imageDescription);
}



/*
NOTES

<html>
<head>
<script language="javascript">
function ScaleSize()
{
document.getElementById("imgTag").style.width = document.body.clientWidth;
document.getElementById("imgTag").style.height = document.body.clientHeight;
}
</script>
</head>
<body onload="javascript:ScaleSize();" onresize="history.go(0)">
<img id="imgTag" src="c:\Test.jpg"  />   
</body>
</html>
*/