// =======================================================================
// ===================== fished PHOTOFOLIO FUNCTIONS =====================
// =======================================================================

var filename = "images";

// checking for konqueror and/or Mac to force former to static 
// and solve the CSS negative % positioning bug/trick for mac:
function checker(){
	this.agent=navigator.userAgent.toLowerCase();
	this.mac=this.agent.indexOf("mac") > -1;
	this.ie = this.agent.indexOf("msie") != -1;
	this.iemac = (this.mac && this.ie)?1:0;
    	this.konq = this.agent.indexOf("konqueror") != -1;
}
var brw = new checker();


// Following Arrays and vars. will be used to automatically create/reference objects on the fly.
var buttonBuffer = "";
var tituloBuffer = "";
var infoBuffer = "";
var targetBuffer = "";
var botones = new Array ();
var foto = new Array ();
var titulo = new Array ();
var info = new Array ();
var target = new Array ();
var slidin = 0; 
var menuOn = 1; 
var togglin = 0; 
var posX;

var botonX  = botonY = 6;
var fotoH = -395;
var fotoV = -191;
var active = 1; 

// Here we'll use as a buffer to add layers:
var addToWrapper, addToPhotoContDiv;

init = function(){
	// como no puedo hacer $HTTP_ACCEPT_LANGUAGE; entonces, 
	// si no hay cookie el texto de los tips sera en ingles:
	if (!(tipsLang=getCookie("meddleLanguage"))) tipsLang = "getEng";
		if (tipsLang == "getEng") {
			menuTipTxt = "Main menu";
			toggleTipTxt = "Show or Hide Submenu";
			submenuTipTxt = "Submenu for pictures";
			prefsTipTxt = "Show or Hide Preferencias";
			prefsLinkTxt = "Preferences";
			prefsTipsTxt = "Tips onload";
		}
		else {
			menuTipTxt = "Menu Principal";
			toggleTipTxt = "Mostrar o Esconder Submenu";
			submenuTipTxt = "Submenu fotografias";
			prefsTipTxt = "Mostrar o Esconder Preferencias";
			prefsLinkTxt = "Preferencias";
			prefsTipsTxt = "Etiquetas Ayuda";
		}

	// reemplazamos el menu soso por el menu con imagenes y rollover:
	if (!(menuLang=getCookie("meddleLanguage"))) menuLang = "en";
		if(menuLang=="getEng" || menuLang=="en") menuLang="en"; else menuLang="sp";

	// adding layer to body via DOM:

	// Creating basic object from 'div', via API.
	wrapperObj=new make("wrapper");

	// These are created dynamically, via innerHTML:
	addToWrapper='<div id="darkenDiv"></div>';
	addToWrapper+='<div id="menuTipDiv"><span>'+menuTipTxt+'</span></div>';
	addToWrapper+='<div id="toggleTipDiv"><span>'+toggleTipTxt+'</span></div>';
	addToWrapper+='<div id="submenuTipDiv"><span>'+submenuTipTxt+'</span></div>';
	addToWrapper+='<div id="prefsTipDiv"><span>'+prefsTipTxt+'</span></div>';
	addToWrapper+='<div id="sectionDiv"></div>';
	// photoBigBoxDiv apart to use transparent bg:
	addToWrapper+='<div id="photoBigBoxDiv"></div>';

	// then add'em to the wrapper:
	wrapperObj.elm.innerHTML+=addToWrapper;
	


	// same method to add layers to photoContDiv:
	photoContObj=new make("photoContDiv");
	
	// photoBigMenuDiv apart to use transparent bg:
	addToPhotoContDiv='<div id="photoBigMenuDiv"></div>';
	// photoMenuContDiv contains photoTargetDiv and buttons. Also titles, info and toggle button. 
	addToPhotoContDiv+='<div id="photoMenuContDiv">';
	addToPhotoContDiv+='<div id="photoTargetBGDiv"><div id="photoTargetDiv"></div></div>';
	addToPhotoContDiv+='<div id="photoTitles"></div><div id="photoInfos"></div>';
	addToPhotoContDiv+='</div>';
	// toggleMenuDiv depends of photoContDiv otherwise it would get hidden too: 
	addToPhotoContDiv+='<div id="toggleMenuDiv"></div>';
	
	// then add'em to the photoContDiv:
	photoContObj.elm.innerHTML+=addToPhotoContDiv;


	loadingObj=new make("loading");


	// tips object creation and timers to hide them:
	menuTipObj=new make("menuTipDiv"); 
	toggleTipObj=new make("toggleTipDiv");
	submenuTipObj=new make("submenuTipDiv");
	prefsTipObj=new make("prefsTipDiv");

	if (!(tipsPrefsVal=getCookie("meddleTips"))) tipsPrefsVal = "tipsOn";
		if (tipsPrefsVal == "tipsOn") {
			menuTipObj.show();
			toggleTipObj.show();
			submenuTipObj.show();
			prefsTipObj.show();
			setTimeout("hideTips()",5000);
		}


	reefObj=new make("headerDiv");
	
	menubarObj=new make("menubarDiv");
	sectionObj=new make("sectionDiv"); 
	
	// Section name/image extracted from location:
	sectionObj.bgi("/gpx/"+filename+".gif");

	// Opacity stuff to unsaturate reef picture and make folio nicer:
	darkenObj=new make("darkenDiv"); darkenObj.setOpacity(0); darkenObj.show(); 
	fondoObj=new make("photoBigBoxDiv"); fondoObj.setOpacity(0); fondoObj.show(); 
	phMenuObj=new make("photoBigMenuDiv"); phMenuObj.setOpacity(0); phMenuObj.show(); 

	// calling Photofolio creation stuff:
	createPhotofolio();

	// position all other elements in page:
	menubarObj.timeSlide(10,0,500,0);
	sectionObj.timeSlide(11,5,2000,-1.5);

	// Centering wrapper in page:
	wrapElement();
	window.onresize = wrapElement;

}

//=================================================================
// Fade out + Hide the tips in 5 seconds:
//=================================================================
hideTips = function(){ 
	menuTipObj.fadeTo(0,10,10,'menuTipObj.hide()'); 
	toggleTipObj.fadeTo(0,10,10,'toggleTipObj.hide()'); 
	submenuTipObj.fadeTo(0,10,10,'submenuTipObj.hide()'); 
	prefsTipObj.fadeTo(0,10,10,'prefsTipObj.hide()'); 
}

//=================================================================
// Toggles Preferences form:
//=================================================================
var prefsOn = 0; 
togglePrefs = function(){
	if (prefsOn == 0) showPrefs();
	else hidePrefs();
}

showPrefs = function(){
	prefsOn=1;
	//prefsBGObj.show();
	//prefsObj.show();
}

hidePrefs = function(){
	prefsOn=0;
	//prefsBGObj.hide();
	//prefsObj.hide();
}

createPhotofolio = function(){
	phMenuContObj=new make("photoMenuContDiv");

	// creating and positioning pictures:
	for (a=0;a<16;a++) {
		n=parseInt(a+1);
	foto[n]=new make("pic"+n+"BoxDiv");
	if (n==6 || n==8 || n==11 ) {foto[n].moveTo(fotoV,0);}
	else {foto[n].moveTo(fotoH,0);}
	}
	foto[1].moveTo(0,0)

	// creating and positioning titles:
	titlesFromHtml=document.getElementById('photoContDiv').getElementsByTagName('h1');
	for (a=0;a<titlesFromHtml.length;a++){ 
		n=parseInt(a+1);
	titulo[n]=titlesFromHtml[a].lastChild.nodeValue;
	tituloBuffer += '<div id="titulo'+n+'Div" class="titulo">'+titulo[n]+'</div>'; 
	}
	phMenuContObj.elm.innerHTML += tituloBuffer;	

	// creating and positioning buttons + mov mot:
	for (a=0;a<16;a++) {
		n=parseInt(a+1);
	buttonBuffer += '<div id="boton'+n+'Div" class="boton"><a href="#" onclick="showPic(\'' + n + '\')" onmouseover="mOV(\'' + n + '\')" onmouseout="mOT(\'' + n + '\')"><img src="/v2/'+n+'.gif" width="18" height="18" /></a></div>';	
	}
	phMenuContObj.elm.innerHTML += buttonBuffer;	
	for (a=0;a<16;a++) {
		n=parseInt(a+1);
	botones[n]=new make("boton"+n+"Div");
	botones[n].moveTo(botonX,botonY);
	if (botonX >= 66) {botonY = botonY + 22;}
	if (botonX <= 66) {botonX = botonX + 22;} else {botonX = 6;}
	}

	// creating and positioning picinfo:
	infoFromHtml=document.getElementById('photoContDiv').getElementsByTagName('p');
	for (a=0;a<infoFromHtml.length;a++){ 
		n=parseInt(a+1);
	info[n]=infoFromHtml[a].lastChild.nodeValue;
	infoBuffer += '<div id="info'+n+'Div" class="info">'+info[n]+'</div>';	
	}
	phMenuContObj.elm.innerHTML += infoBuffer;	

	// creating and positioning targets:
	targetBGObj=new make("photoTargetBGDiv");
	targetObj=new make("photoTargetDiv");
	for (a=0;a<16;a++) {
		n=parseInt(a+1);
	targetBuffer += '<div id="target'+n+'Div" class="target"><img src="/v2/t'+n+'.jpg" alt="'+titulo[n]+'" width="74" height="74" /></div>';
	}
	targetObj.elm.innerHTML = targetBuffer;
	for (a=0;a<16;a++) {
		n=parseInt(a+1);
	titulo[n]=new make("titulo"+n+"Div");
	info[n]=new make("info"+n+"Div");
	target[n]=new make("target"+n+"Div");
	if (a>=1) {titulo[n].hide();info[n].hide();target[n].hide();}
	}

	// creating and positioning link to toggle menu:
	toggleMenuObj=new make("toggleMenuDiv");
	toggleMenuObj.elm.innerHTML='<a href="#" onclick="toggleMenu()"><img src="/v2/toggle.gif" alt="toggle menu" width="18" height="18" /></a>';

	callAnimations();
}

mOV = function(w){
if (slidin==0) {
	titulo[active].hide();
	info[active].hide();
	target[active].hide();
	titulo[w].show();
	info[w].show();
	target[w].show();
	}
}

mOT = function(w){
if (slidin==0) {
	titulo[w].hide();
	info[w].hide();
	target[w].hide();
	titulo[active].show();
	info[active].show();
	target[active].show();
	}
}

toggleMenu = function(){
	if (menuOn == 0) showMenu();
	else hideMenu();
}

showMenu = function(){
	if (togglin==0) {
	togglin=1;menuOn=1;
	posX = aleat(10,270);
	phMenuObj.timeSlide(posX,0,1000,1);
	phMenuContObj.timeSlide(posX+2,0,1000,1,null,'resetMenu()');
	}
}

hideMenu = function(){
	if (togglin==0) {
	togglin=1;menuOn=0;
	phMenuObj.timeSlide(-160,0,1000,1);
	phMenuContObj.timeSlide(-160,0,1000,1,null,'repositionMenu()');
	}
}

repositionMenu = function(){
	zm = aleat(0,3); 
	if (zm<2){
	phMenuObj.moveTo(400,0);
	phMenuContObj.moveTo(404,0);
	}
	togglin=0;
}

resetMenu = function(){
togglin=0;
}

showPic = function(w){
	if (slidin==0 && w != active) {
	slidin=1;

	titulo[active].hide();
	info[active].hide();
	target[active].hide();
	foto[active].timeSlideBy(-395,0,1750,-1);
	
	active=w;

	titulo[active].show();
	info[active].show();
	target[active].show();
	foto[active].timeSlideBy(395,0,1750,1,null,'resetPics()');
	}
}

resetPics = function(){
slidin=0;
}


callAnimations = function() {
	// hide loading div 
	loadingObj.hide();
	darkenObj.fadeTo(80,5,10);
	fondoObj.fadeTo(50,5,10);
	phMenuObj.fadeTo(60,5,10);
	}

//=================================================================
// header script extracted from http://13thparallel.net
//=================================================================
// Utility functions for importing a stylesheet on the fly.
// The href argument is a string.
// The optional media argument is a string.
// The return value is false if none of the methods are supported.
//=================================================================


addStyleSheet = function(href, media) {
	// Trying createStyleSheet first, because that seems to work best with IE5/Mac.
	if (document.createStyleSheet) {
		document.createStyleSheet(href);
		return true;
	}
	else if (document.getElementsByTagName && document.createElement) {
		var head = document.getElementsByTagName("head")[0];
		if (!head || !head.appendChild) return false;
		
		var link = document.createElement("link");
		link.rel = "stylesheet";
		link.type = "text/css";
		if (media) link.media = media;
		link.href = href;
		link = head.appendChild(link);
		
		return true;
	}
	return false;
}

if (document.getElementById && document.getElementsByTagName && document.createElement 
&& !brw.konq && typeof document.getElementsByTagName("head")[0].innerHTML != "undefined") {

	// Disabling the basic sylesheet and creating a new one for the dynamic interface.
	// It would be easier to set a new value to the href of the link with the basic stylesheet,
	// but the href property is officially read-only, so we'll treat it as such.
	
	// document.getElementsByTagName("style")[0].disabled = true;
	document.getElementById("doubleplusgoodstyle").disabled = true;
addStyleSheet("/v2/reef.css", "screen, tv");
	
	if (document.all && navigator.userAgent.toLowerCase().indexOf("mac") == -1)	{
		document.getElementsByTagName("html")[0].style.overflow = "hidden";
	}

onload=init;
}