function toggleLang(){
	var lang = readCookie('LANGUAGE');
	if (lang == 'spanish')
		english();
	else
		spanish();
}

function spanish(){
	CSSRule('.spanish',{display:''});
	CSSRule('.english',{display:'none'});
	CSSRule('#sSpanish',{color:'#689cd3'});
	CSSRule('#sEnglish',{color:'#bdd8f4'});
	CSSRule('#sSpanish',{textDecoration:'none'});
	CSSRule('#sEnglish',{textDecoration:'underline'});
	createCookie('LANGUAGE','spanish');
	setTitle();
}
function english(){
	CSSRule('.spanish',{display:'none'});
	CSSRule('.english',{display:''});
	CSSRule('#sSpanish',{color:'#bdd8f4',textDecoration:'underline'});
	CSSRule('#sEnglish',{color:'#689cd3',textDecoration:'none'});
	createCookie('LANGUAGE','english');
	setTitle();
}
function setTitle(){
	var lang = readCookie('LANGUAGE')
	document.title = pageTitle[lang];
	//$('sSpanish').className = lang == 'spanish' ? 'sel' : 'fLink'; 
	//$('sEnglish').className = lang == 'english' ? 'sel' : 'fLink';
	$('about_e').style.visibility = 'hidden';
	$('about_s').style.visibility = 'hidden';
	$('puerto_e').style.visibility = 'hidden';
	$('puerto_s').style.visibility = 'hidden';
	$('events_e').style.visibility = 'hidden';
	$('events_s').style.visibility = 'hidden';
}

function dCookie(){
	eraseCookie('LANGUAGE');
	eraseCookie('language');
}


function photoSwapper(img,box) {
	document.getElementById(box).src = "images/" + img;
}

var timeout	= 500;
var closetimer	= 0;
var ddmenuitem	= 0;

function mopen(id)
{	
	mcancelclosetime();
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
	ddmenuitem = document.getElementById(id);
	ddmenuitem.style.visibility = 'visible';
}
function mclose()
{
	if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
function mclosetime()
{
	closetimer = window.setTimeout(mclose, timeout);
}
function mcancelclosetime()
{
	if(closetimer)
	{
		window.clearTimeout(closetimer);
		closetimer = null;
	}
}

function pullLeaf(id) {
	document.getElementById(id).style.background = "url('images/leaf.gif') no-repeat";
}
function dropLeaf(id) {
	document.getElementById(id).style.background = "";
}


var indexcaptiontimeout	= 100;
var indexcaptionclosetimer	= 0;
var indexcaptionddmenuitem	= 0;

function indexcaptionmopen(id)
{	
	indexcaptionmcancelclosetime();
	if(indexcaptionddmenuitem) indexcaptionddmenuitem.style.visibility = 'hidden';
	indexcaptionddmenuitem = document.getElementById(id);
	indexcaptionddmenuitem.style.visibility = 'visible';
}
function indexcaptionmclose()
{
	if(indexcaptionddmenuitem) indexcaptionddmenuitem.style.visibility = 'hidden';
}
function indexcaptionmclosetime()
{
	indexcaptionclosetimer = window.setTimeout(indexcaptionmclose, indexcaptiontimeout);
}
function indexcaptionmcancelclosetime()
{
	if(indexcaptionclosetimer)
	{
		window.clearTimeout(indexcaptionclosetimer);
		indexcaptionclosetimer = null;
	}
}




var captiontimeout	= 100;
var captionclosetimer	= 0;
var captionddmenuitem	= 0;
var captionindex = 0;
var placecount = 1;
var Z = 1;
function captionmopen(id,elmId)
{
	placecount++;
	captionmcancelclosetime();
	if(captionddmenuitem) 
	{
		captionddmenuitem.style.visibility = 'hidden';
	}
	captionddmenuitem = document.getElementById(id);
	captionindex = document.getElementById(elmId);
	captionddmenuitem.style.visibility = 'visible';
	captionindex.style.zIndex = placecount;
}
function captionmclose()
{
	if(captionddmenuitem)
	{
		captionddmenuitem.style.visibility = 'hidden';
	}
}
function captionmclosetime()
{
	captionclosetimer = window.setTimeout(captionmclose, captiontimeout);
}
function captionmcancelclosetime()
{
	if(captionclosetimer)
	{
		window.clearTimeout(captionclosetimer);
		captionclosetimer = null;
	}
}


function jump(string) {
	var elm = $(string + 'anchor');
	var top = -116;
	while (elm && elm.tagName != 'BODY')  {
		top += elm.offsetTop;
		elm = elm.offsetParent;
	}
	scrollTo(0,top);
}



CSSRule('.imgClass', {backgroundColor:'#fff', border:'1px solid #d2e0ed', padding:'5px'});
CSSRule('.caption', {marginTop:'-35px',left:'6px',width:'230px', height:'20px', backgroundColor:'#000', color:'#fff', fontSize:'16px', fontWeight:'bold', padding:'5px', opacity:'0.75',filter:'alpha(opacity=75)',zoom:'1',position:'relative'});
//CSSRule('#roomanchors', {fontSize:'12px', color:'#003366'});
CSSRule('.anchorStyle', {fontSize:'12px', color:'#003366', margin:'0px 10px 0px 10px', lineHeight:'20px'});
CSSRule('.column', {float:'right', whiteSpace:'nowrap', textAlign:'left',paddingLeft:'10px',paddingRight:'10px'});
CSSRule('.collageStyle', {float:'right', width:'40%', position:'relative', height:'50px'});
CSSRule('.textStyle', {float:'left', width:'59%'});
CSSRule('.sepStyle', {backgroundImage:"url('images/room_top.gif')", backgroundRepeat:'no-repeat', width:'780px', height:'43px', padding:'10px 0px 0px 5px', marginLeft:'-15px', marginBottom:'15px'});
CSSRule('.titleStyle', {float:'left', fontFamily:'Georgia,serif', fontSize:'20px', fontWeight:'normal', color:'#04376c', padding:'0px'});
CSSRule('.pageTitle', { fontFamily:'Georgia,serif', float:'none',  fontSize:'28px', color:'#04376c'});
CSSRule('.spacerStyle', {clear:'both', marginBottom:'20px'});
CSSRule('.breakDiv', {height:'1px', width:'100%'});
		
		
String.prototype.makeReadable = function(){
   var str = this.replace( /([A-Z])/g , function(m,p1,p2){ return ' '+m; } );
   return str.replace(/^[a-z]/, function(m){ return m.toUpperCase()} );
};

function buildPage(optObj){
	var anchorArray = optObj.englishAnchors || [];
	var spanishAnchors = optObj.spanishAnchors || [];
	var numberOfColumns = optObj.numberOfColumns || 0;

	page = $('main');
	
	var columnBreak = (numberOfColumns) ? Math.floor(anchorArray.length / numberOfColumns) : 0;
	
	
	/*Build anchors*/
	var anchors = document.createElement('div');
	var title = document.createElement('span');
	title.className = 'pageTitle';
	title.innerHTML = optObj.pageTitle || '';
	anchors.appendChild(title);
	if (numberOfColumns == 0){
		var br = document.createElement('div');
		br.className = 'breakDiv';
		anchors.appendChild(br);
		for (var i=0; i<anchorArray.length; i++){
			anchors.appendChild(createAnchor(i));
		}
	}
	else{
		var remainder = anchorArray.length % numberOfColumns;
		var anchorCount = 0;
		var ix = 0;
		var colsArray = [];
		for (var x=0; x < numberOfColumns; x++){
			var colDiv = document.createElement('div');
			colDiv.className = 'column';
			colsArray.push(colDiv);
			for (var i=0; i<columnBreak; i++){
				colDiv.appendChild(createAnchor(ix));
				colDiv.appendChild(document.createElement('br'));
				ix++;
			}
			if (remainder){
				remainder--;
				colDiv.appendChild(createAnchor(ix));
				colDiv.appendChild(document.createElement('br'));
				ix++
			}
		}
		for (var i=colsArray.length-1;i>=0;i--)
			anchors.appendChild(colsArray[i])
	}
	function createAnchor(x){
		var a = document.createElement('a');
		a.className = 'anchorStyle';
		a.href = "javascript:jump('" + anchorArray[x] + "')";
		a.innerHTML = '<span class="english">'+anchorArray[x].makeReadable()+'</span><span class="spanish">'+spanishAnchors[x].makeReadable()+'</span>';
		a.style.marginRight = (i < (anchorArray.length-1)) ? '10px' : '0px';
		return a;
	}
	page.appendChild(anchors);
	
	/*Build each section*/
	for (var ii=0; ii<anchorArray.length; ii++)
	{
		var z = 0;

		var spacer = page.appendChild(document.createElement('div'));
		spacer.className = 'spacerStyle';
		
		var sep = page.appendChild(document.createElement('div'));
		sep.className = 'sepStyle';
		sep.id = anchorArray[ii]+'anchor';
		
		if (ii != 0)
			sep.innerHTML = '<a href="javascript:scrollTo(0,0)" style="color:#036" ><span class="english">Back to Top</span><span class="spanish">Volver al principio</span></a>';
		
		var collageDiv = page.appendChild(document.createElement('div'));  //$(array[ii]);
		collageDiv.className = 'collageStyle';
		
		var titleDiv = page.appendChild(document.createElement('div'));
		titleDiv.innerHTML = '<span class="english">'+anchorArray[ii].makeReadable()+'</span><span class="spanish">'+spanishAnchors[ii].makeReadable()+'</span>';
		titleDiv.className = 'titleStyle';
		
		var textDiv = page.appendChild(document.createElement('div'));  //$(array[ii]);
		textDiv.className = 'textStyle';
		textDiv.innerHTML = window[anchorArray[ii]+'Description'];
		
		var imagesArray = window[anchorArray[ii]];
		
		if (imagesArray && imagesArray.length){
			imagesArray.top = 100;
			imagesArray.left = 0;
			for(var i=0;i<imagesArray.length;i++) {
				var wrapper = document.createElement('div');
				var img = new Image();
				var cap = document.createElement('div');
				wrapper.appendChild(img);
				wrapper.style.position = 'absolute';
				wrapper.style.border = '1px solid #c1daf4';
				wrapper.style.cursor = 'pointer';
				
				cap.style.display = 'none';
				cap.innerHTML = '<font class="english">' + imagesArray[i].englishCaption + '</font><font class="spanish">' + imagesArray[i].spanishCaption + '</font>';
				wrapper.appendChild(cap);
				
				cap.className = 'caption';
				wrapper.shrink = function(){
					var img = this.firstChild;
					var par = this;
					var cap = img.next();
					if (par.bringToTop.timeOut){
						clearTimeout(par.bringToTop.timeOut);
					}
					
					if (img.saveHeight){
						img.height = img.saveHeight;
						img.width = img.saveWidth;
						par.style.top = img.saveTop;
						par.style.left = img.saveLeft;
						cap.style.display = 'none';
					}
				}
				wrapper.bringToTop = function (){
					var par = this;
					var img = this.firstChild;
					var cap = img.next();
					par.bringToTop.timeOut = setTimeout(function(){
						par.style.zIndex = ++Z;
						img.saveHeight = img.saveHeight || img.height;
						img.saveWidth = img.saveWidth || img.width;
						img.saveTop = img.saveTop || par.style.top;
						img.saveLeft = img.saveLeft || par.style.left;
						img.height = img.height * 1.2;
						img.width = img.width * 1.2;
						par.style.top = (parseInt(par.style.top) - Math.round((img.height - img.saveHeight)/2)   ) + 'px';
						par.style.left =  (parseInt(par.style.left) - Math.round((img.width - img.saveWidth)/2)   ) + 'px';
						//cap.style.display = 'block';
						cap.style.zIndex = par.style.zIndex + 10;
					},600);
				}
		
				img.popPic = function(){
					if (!window.picDiv){
						picDiv = document.createElement('div') ;
						picDiv.id = 'pictureDiv';
						picDiv.style.border="1px solid black";
						picDiv.style.position = 'absolute';
						document.body.appendChild(picDiv);
						Event.observe(picDiv,'click',function(){picDiv.style.visibility='hidden'})
						picDiv.appendChild(new Image());
					}
					var adj = 1;
					var width = Math.round(this.width*5.142);
					var height = Math.round(this.height*5.142);
					getScroll();
					adj = windowHeight/height;
					height = height * adj;
					width = width * adj;
					picDiv.style.visibility='visible';
					picDiv.innerHTML = '<img src="'+this.src.replace('_r','_l')+'">';
					picDiv.firstChild.width = width;
					picDiv.firstChild.height = height;
					picDiv.style.top = scrollTop+((windowHeight-picDiv.clientHeight)/2) +'px';
					picDiv.style.left = scrollLeft+((document.body.clientWidth-picDiv.clientWidth)/2) +'px';
					picDiv.style.zIndex = 10000;
				}
		
				img.className = 'imgClass';
				img.parentNode.style.zIndex = ++Z;
				img.obj = imagesArray[i];
				if (i > 0)
					img.obj.previousSibling = imagesArray[i-1]			
		
		
				Event.observe(img,'click',img.popPic);
				Event.observe(wrapper,'mouseenter',wrapper.bringToTop);
				Event.observe(wrapper,'mouseleave',wrapper.shrink);
				
				Event.observe(img,'load',function(collageDiv, imagesArray){
					var img = $(this);
					var width = img.width;
					var height = img.height;
					var adj = img.obj.width / width;
					
					width = img.width = width * adj;
					height = img.height = height * adj;
					
					placeImage();
					
					function placeImage(){  // the load event could fire 'out of order'.  so we only place the image after it's predecesor has been placed.
						if (img.obj.previousSibling && !img.obj.previousSibling.done){
							setTimeout(placeImage,25);
							return;
						}
						var cap = img.next();
						var wrapper = img.parentNode;

						wrapper.style.top = Math.round(imagesArray.top+ img.obj.topAdjust)+'px';
						wrapper.style.left = Math.round(imagesArray.left+ img.obj.leftAdjust)+'px';

						imagesArray.top += Math.round(height + img.obj.topAdjust);
						imagesArray.left += Math.round(img.obj.leftAdjust);
						
						collageDiv.appendChild(img.parentNode);
						var par = $(img.parentNode.parentNode);
						if (par.getHeight() < imagesArray.top)
							par.style.height = imagesArray.top+'px';
						
						img.obj.done = true;
					}
				}.bind(img, collageDiv, imagesArray));
				img.src='images/gallery/' + imagesArray[i].imageName;
			}
		}
	}
}