// function to set the proportions of the page
function setWidth() {
	var viewport = $('pagewrap').getSize();
	var mw = $('pagewrap').getProperty('min-width');
	var widthpercent = 0.57; // this is width of image area expressed as a percentage of the page height
	var areawidth = viewport.y * widthpercent;//  in pixels
	var liheight = (areawidth / 7) - (15 / 8); // this is to evenly space the menu items vertically-- parseFloat($('body').getStyle('line-height')
	// set the margins propotional to the width
	var margin = 8 + ((viewport.x - 800) * .00384); // starts at 8% and ranges up to 11 or so
	// we set the image area as a square
	$('imagebox').setStyles({
									'width':areawidth,
									'height':areawidth,
									'right':margin+"%"
									});
	//alert( areawidth+' '+margin+' '+viewport.y );
	$('indexmenu').setStyles({
									 'height':areawidth+0,
									 'width': viewport.x - ( areawidth + ( margin * 2 * 0.01 * viewport.x ) )
									 
									 });
	$$('ul#nav li.top, ul#nav li.parent').each(function(e) {
								e.setStyle('height',liheight);
								});
	$$('.seconditem').each(function(e) {
											  e.setStyles({
															  'width':areawidth,
															  'right':margin+"%"
															  });
											  });
	$$('.firstitem').each(function(e) {
											 e.setStyles({
															 'left':margin+"%"
															 });
											 });
	//  set the font size
	var height = viewport.y;
	var hmax = 785;
	var hmin = 597;
	var fontmax = 17;
	var fontmin = 13;
	var fontSize = fontmin;
	if (height < hmax && height > hmin) {
		fontSize = fontmin + ((height-hmin)*((fontmax-fontmin)/(hmax-hmin)));
	} else if (height >= hmax) {
		fontSize = fontmax;
	}
	$('body').setStyle('font-size',fontSize); // set the size
	//var addresstext = ((areawidth < 380)? "<span class='tight' >1100</span> Constant Springs Dr.," : "<span class='tight' >1100</span> Constant Springs Drive");// determine text for address line—shorter version for smaller layout
	//$('address').set('html', addresstext);
	return areawidth;
}
//
// image set selector for epharchitects.com
//
//
var imageSet = new Class({
	Implements: [ Options, Events ],
	options: {
		duration: 500,
		transition: 'sine',
		remain:true, //  option to leave the image set on when the pointer leaves the menu area
		links: [] ,// the menu links
		targets: [],
		dim: 0.20,
		testx: new RegExp(/home|links|about/) //  no dimming on links with no key images
	},
	initialize: function(options) {
		this.setOptions(options);
		this.links = $$('#nav a');
		this.targets = $$('#imagebox div.target');
		this.targets.each( function(t) {
											 var targetimages = this.getGrandchildren(t,"img","a");
											 targetimages.each( function(img) {
							//dbug.log("grandchild= "+img.getProperty('class'));
																				  if (!img.hasClass("emptybox")) {
																					  img.setStyle('opacity',0);
																					  //dbug.log("img set style");
																				  }
																				  });
											 },this);
		this.links.each( function(l) {
			//  add the events
			l.addEvent('mouseenter', this.showIt.pass(l.getProperty('id'), this) );
			l.addEvent('mouseleave', this.unDim.pass(l.getProperty('id'), this) );
		  },   this );
		if (!this.options.remain) $('nav').addEvent('mouseleave', this.hideIt.bind(this));
	},
	showIt:function(id){
		if (this.options.testx.test(id) == false) { // don't process links with no key images
		$$('img.emptybox, img.picbox').each( function(e) {
												if (!e.hasClass('off')) {
												  e.set('morph', {
																		duration: this.options.duration,
																		transition: this.options.transition + ":out"
																		}).morph({ 
																			opacity : this.options.dim
																			});
												}
												  }, this);
		}
		this.targets.each( function(div) {
											var images = this.getGrandchildren(div,"img","a");
											found = false;
											images.each( function(i) {
																		 if (i.hasClass(id)) found = true;
																		 }, this);
											//dbug.log("found "+found+" id="+id);
											(found) ? imgid = id : imgid = 'emptybox';
											images.each( function(e) {	
															//dbug.log("showit: imgid= "+imgid+" image element class= "+e.getProperty('class'));			 	
														if (e.hasClass(imgid)) {
															e.addClass('live');
															e.set('morph', {
																	duration: this.options.duration,
																	transition: this.options.transition + ":out"
																	}).morph({ 
																		opacity : 1
																		});
														} else if (e.hasClass('live')) {
															e.removeClass('live');
															e.addClass('off');
															e.set('morph', {
																duration: this.options.duration,
																transition: this.options.transition + ":in"
																}).morph({ 
																	opacity : 0
																	});
														} else {
															e.setStyle('opacity',0);
															e.addClass('off');
														}
											}, this);
											},this);
	},
	hideIt:function(){
		this.targets.each( function(target){
			target.getChildren('img').each( function(e) {
											if (!e.hasClass('emptybox')) {
																e.removeClass('live');
																e.set('morph', {
																	duration: this.options.duration,
																	transition: this.options.transition + ":in"
																	}).morph({ 
																		opacity : 0
																		});
											} else {
												e.addClass('live');
																e.set('morph', {
																		duration: this.options.duration,
																		transition: this.options.transition + ":out"
																		}).morph({ 
																			opacity : 1
																			});
											}
											},this);
			},this);
	},
	unDim:function(id) {
		if (this.options.testx.test(id) == false) {
		$$('img.emptybox, img.picbox').each( function(e) {
												  if (e.hasClass('off')) {
													  //e.removeClass('off');
												  } else {
												  //e.get('morph').cancel();
												  e.set('morph', {
																		duration: this.options.duration,
																		transition: this.options.transition + ":out"
																		}).morph({ 
																			opacity : 1
																			});
												  }
												  }, this);
		}
	},
	setIt:function(id){ // for setting the work-area pages (no dimming)
		this.targets.each( function(div) {
											var images = this.getGrandchildren(div,"img","a");
											found = false;
											images.each( function(i) {
																		 if (i.hasClass(id)) found = true;
																		 }, this);
											//dbug.log("found "+found+" id="+id);
											(found) ? imgid = id : imgid = 'emptybox';
											images.each( function(e) {	
															//dbug.log("showit: imgid= "+imgid+" image element class= "+e.getProperty('class'));			 	
														if (e.hasClass(imgid)) {
															e.addClass('live');
															e.set('morph', {
																	duration: this.options.duration,
																	transition: this.options.transition + ":out"
																	}).morph({ 
																		opacity : 1
																		});
														} else if (e.hasClass('live')) {
															e.removeClass('live');
															e.addClass('off');
															e.set('morph', {
																duration: this.options.duration,
																transition: this.options.transition + ":in"
																}).morph({ 
																	opacity : 0
																	});
														} else {
															e.setStyle('opacity',0);
															e.addClass('off');
														}
											}, this);
											},this);
	},
	getGrandchildren:function(grandparent,childTag,parentTag) { 
	// returns a collection of all children and grandchildren of tag childTag with parent parentTag
		var collection = grandparent.getChildren(childTag);
		grandparent.getChildren(parentTag).each( function(c) {
												 collection.combine(c.getChildren(childTag));
												 });
		return collection;
	},
	test:function() {
		//dbug.log("test function");
		return true;
	}
	});