﻿// JavaScript Document
/**
 * This extends the scriptaculous-library with a blindLeft-function
 * 
 * @author Henrik Niklaus <henrik@nikolausohneo.de>
 * @copyright  © 2007 by rionord.de
 */
Effect.BlindLeft = function(element) {
  element = $(element);
  element.makeClipping();
  return new Effect.Scale(element, 0,
    Object.extend({ scaleContent: false, 
      scaleY: false,                     
      restoreAfterFinish: true,
      afterFinishInternal: function(effect) {
        effect.element.hide().undoClipping();
      } 
    }, arguments[1] || {})
  );
}

/**
 * This extends the scriptaculous-library with a blindRight-function
 * 
 * @author Henrik Niklaus <henrik@nikolausohneo.de>
 * @copyright  © 2007 by rionord.de
 */
Effect.BlindRight = function(element) {
  element = $(element);
    var elementDimensions = element.getDimensions();
  return new Effect.Scale(element, 100, Object.extend({ 
    scaleContent: false, 
    scaleY: false,
    scaleFrom: 0,
    scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
    restoreAfterFinish: true,
    afterSetup: function(effect) {
      effect.element.makeClipping().setStyle({width: '0px'}).show(); 
    },  
    afterFinishInternal: function(effect) {
      effect.element.undoClipping();
    }
  }, arguments[1] || {}));
}

/**
 * Debug
 * 
 * prints debugging information to different places.
 * it depends on a div-tag with id 'debug'.
 * 
 * @author Henrik Niklaus <henrik@nikolausohneo.de>
 * @copyright  © 2007 by rionord.de
 */
var Debug = {
	debuggingMode: false,
	
	debug: null,
	
	init: function() {
		if(this.debuggingMode) {
			this.debug = $('debug');
			if(this.debug != null) {
				//debug.style.visibility = "visible";
				this.debug.style.display = "block";
			}
		}
	},
	
	dump: function(msg) {
		if(this.debuggingMode) {
			this.debug.innerHTML = msg + "<br />" + this.debug.innerHTML;
			//dump(msg);
			//alert(msg);
			//window.status = msg;
		}
	},
	
	dumpArray: function(msgArray) {
		if(this.debuggingMode) {
			var msg = "";
			for(var i = 0;i < msgArray.length;i++) {
				msg += msgArray[i] + "<br />";
			}
			this.dump(msg);
		}
	},
	
	dumpProperties: function(obj) {
		if(this.debuggingMode) {
			var str = '';
			for(var property in obj) {
				str += property + ': ' + obj[property] + '<br />'; 
			}
			this.dump(str);
		}
	}
}

/**
 * Browser
 * 
 * detects the operating system and the user-agent
 * 
 * @author Henrik Niklaus <henrik@nikolausohneo.de>
 * @copyright  © 2007 by rionord.de
 */
var Browser = {
	agt: null,
	
	isMac: null,
	
	isIe: null,
	
	isIe5: null,
	
	isMacIe5: null,
	
	isIe7: null,
	
	init: function() {
		this.agt = navigator.userAgent.toLowerCase();
		this.isMac = (this.agt.indexOf("mac") != -1);
		this.isIe = (this.agt.indexOf("msie") != -1);
		this.isIe5 = (this.agt.indexOf("msie 5") != -1);
		this.isIe6 = (this.agt.indexOf("msie 6") != -1);
		this.isIe7 = (this.agt.indexOf("msie 7") != -1);		
		
		this.isMacIe5 = this.isMac && this.isIe5;
	}
}


/**
 * Nav
 * 
 * handles the dynamic navigation-menu
 * 
 * @author Henrik Niklaus <henrik@nikolausohneo.de>
 * @copyright  © 2007 by rionord.de
 */
var Nav = {	
	activeNav: null,
	
	lastActiveNav: null,
	
	activeSubNavPoint: null,
	
	lastActiveSubNavPoint: null,

	timer: null,

	navChar: null,

	effectDuration: null,
	
	maxDepthNav: null,
	
	maxDepthSubNav: null,
	
	maxDepthSubSubNav: null,
	
	navPointHeight: null,
	
	navPointWidth: null,
	
	timeOutIntervall: null,
	
	transparencyLevel: null,
	
	page: null,
	
	/* the main nav point which is active (clicked) / the area we are in */
	selectedNav: null,
	
	init: function(page) {
		this.page = page;
		
		this.maxDepthNav = 6; //amount of subnavs
		this.maxDepthSubNav = 12; //max amount of subnav-points
		this.maxDepthSubSubNav = 0; //max amount of sub subnav-points
		this.effectDuration = 0.3;
		this.navPointHeight = 23;
		if(Browser.isIe6 || Browser.isIe5) {
			this.navPointHeight = 25;
		} else if(Browser.isIe7) {
			this.navPointHeight = 24;
		}
		this.transparencyLevel = 0.75;
		
		var spacer = 0;
		if(Browser.isIe6) {
			spacer = 1;
		}
		
		this.navPointWidth = 150 + spacer;
		
		this.timeOutIntervall = 500;

		var element;
		var elementId;
		
		//prepare (raise) all subnavs
		for(var i = 1;i <= this.maxDepthNav;i++) {
			elementId = 'subNav_' + i;
			element = $(elementId);
			if(element != null) {
				Effect.BlindUp(elementId, {duration: 0});
				//element.style.visibility = "visible";
			}
		}
		//prepare (position + blind-off-effect) all sub-navpoints
		for(var i = 1;i <= this.maxDepthNav;i++) {
			
			this.setTransparency("on", i, null, null);
			for(var j = 1;j <= this.maxDepthSubNav;j++) {
				this.setTransparency("off", i, j, null);
				elementId = "subSubNav_" + i + "_" + j;
				element = $(elementId);								
				if(element != null) {
					this.setSubNavPosition(i, j);
					Effect.BlindLeft(elementId, {duration: this.effectDuration});
				}
				for(var k = 1;k <= this.maxDepthSubSubNav;k++) {
					this.setTransparency("off", i, j, k);
				}
			}
		}
		
		//compute the height of the filling layer under the subnavigation
		for(var i = 1;i <= this.maxDepthNav;i++) {
			var subNavPointCounter = 0;
			for(var j = 1;j <= this.maxDepthSubNav;j++) {
				if($('subNavPoint_' + i + '_' + j) != null) {
					subNavPointCounter++;
				}
			}
			if(this.page == 'home') {
				var heightOfPanorama = 309;
			} else {
				var heightOfPanorama = 138;
			}
			var heightOfFilling = heightOfPanorama - (subNavPointCounter * this.navPointHeight);
			if(heightOfFilling < 0) {	//dont show the filling if there are too many subnavpoints
				heightOfFilling = 0;
			} else if(heightOfFilling < this.navPointHeight) {
				heightOfFilling = 0;
			}
			var element = $('subNavFill_' + i);
			if(element != null) {
				element.style.height = heightOfFilling + 'px';
			}
		}
		
		//activate the hover-flag
		var navi = ['home', 'rio_nord', 'leistungen', 'kunden', 'kontakt'];
		for(var i = 0;i <= navi.length;i++) {
			if(navi[i] == this.page) {
				if(i == 0) {
					$("navPointTop_" + i).className = "navPointTopHomeHover";
				} else {
					$("navPointTop_" + i).className = "navPointTopHover";
				}
				this.selectedNav = i;
			}
		}
		
		//this.addEventsForMainNav();
		
	},
	
	/*addEventsForMainNav: function() {
		var element = $("navPoint_1");
		if(Browser.isIe) {
			
		} else {
			if(element.addEventListener) {
				element.addEventListener("mouseover", Nav.navOver, false);
				element.addEventListener("mouseout", Nav.navOut, false);
			}
		}
	},*/
	
	navOver: function(id) {
		//this.hideAllSubNavs(id);
		this.deactivateAllSubNavPoints(id, null);
		if(id != this.lastActiveNav) {
			clearTimeout(this.timer);
			this.hideNav(this.lastActiveNav);
			this.lastActiveNav = id;
		}
		if(this.activeNav != id) {
			var element = $("navPointTop_" + id);
			if(element != null) {
				if(id == 0) { //home-button without subnav
					element.className = "navPointTopHomeHover";
					//return;
				} else {
					element.className = "navPointTopHover";
				}
			}
			var elementId = this.getElementId(id);
			this.activeNav = id;
			var element = $(elementId);
			if(element != null) {
				element.style.visibility = "visible";
				Effect.BlindDown(elementId, {duration: this.effectDuration});
			}
			this.hideLastSubSubNav();
		} else if(this.activeNav == id) {
			clearTimeout(this.timer);
		}
		this.activeNav = id;
	},

	navOut: function(id) {
		this.timer = setTimeout("Nav.hideNav("+id+")", this.timeOutIntervall);
	},

	hideNav: function(id) {
		if(id != null) {
			var element = $("navPointTop_" + id);
			if(element != null) {
				if(this.selectedNav != id) {
					element.className = "navPointTop";
				}
				if(id != 0) {
					var subNavElementId = this.getElementId(id);
					if($(subNavElementId) != null) {
						Effect.BlindUp(subNavElementId, {duration: 0});
					}
					this.activeNav = null;
				} else {
					this.activeNav = null;
				}
			}
		}
	},
	
	/**
	 * hideAllSubNavs
	 * 
	 * this is a hack to prevent that a subnav is still shown after moving _very_ quick over the main nav
	 */
	hideAllSubNavs: function(exceptThisId) {
		for(var id = 1;id <= this.maxDepthNav; id++) {
			if(exceptThisId != id) {
				var subNavElementId = this.getElementId(id);
				if($(subNavElementId) != null) {
					Effect.BlindUp(subNavElementId, {duration: 0});
				}
			}
		}
	},

	subNavOver: function(id, subId) {
		this.deactivateAllSubNavPoints(id, subId);
		if(this.activeNav == id) {
			clearTimeout(this.timer);
		}
		if(subId != null) {	//onmouseover not over the bottom-fill-div
			if(this.lastActiveSubNavPoint != null) {
				if(subId != this.lastActiveSubNavPoint) {
					this.hideSubSubNav(id, this.lastActiveSubNavPoint);
					this.showSubSubNav(id, subId);
				}
			} else {
				this.showSubSubNav(id, subId);
			}
			this.lastActiveSubNavPoint = subId;
			this.setTransparency("on", id, subId);
		}
	},
	
	deactivateAllSubNavPoints: function(id, subId) {
		for(var i = 1;i <= this.maxDepthSubNav;i++) {
			if(i != subId) {
				this.setTransparency("off", id, i, null);
			}
		}
	},

	subNavOut: function(id, subId) {
		this.timer = setTimeout("Nav.hideNav("+id+")", this.timeOutIntervall);
		if(subId != null) {	//onmouseout not over the bottom-fill-div
			this.setTransparency("off", id, subId);
		}
	},
	
	showSubSubNav: function(id, subId) {
		//Debug.dump("showSubSubNav called");
		var subSubNavId = "subSubNav_" + id + "_" + subId;
		var subSubNav = $(subSubNavId);
		if(subSubNav != null) {
			subSubNav.style.visibility = "visible";
			//setSubNavPosition(id, subId);
			Effect.BlindRight(subSubNavId, {duration: this.effectDuration});
		}
	},

	hideSubSubNav: function(id, subId) {
		//Debug.dump("hideSubSubNav called");
		var subSubNavId = "subSubNav_" + id + "_" + subId;
		var subSubNav = $(subSubNavId);
		if(subSubNav != null) {
			//subSubNav.style.visibility = "visible";
			//setSubNavPosition(id, subId);
			Effect.BlindLeft(subSubNavId, {duration: 0});
		}
	},
	
	hideLastSubSubNav: function() {
		this.hideSubSubNav(this.lastActiveNav, this.lastActiveSubNavPoint);
	},

	setSubNavPosition: function(id, subId) {
		var subSubNavId = "subSubNav_" + id + "_" + subId;
		var subSubNav = $(subSubNavId);

		var subNavPointId = "subNavPoint_" + id + "_" + subId;
		var subNavPoint = $(subNavPointId);

		var parentCoords = [subNavPoint.style.left, subNavPoint.style.top];

		subSubNav.style.top = (subId * this.navPointHeight) - this.navPointHeight + "px";
		subSubNav.style.left = parentCoords[0] + this.navPointWidth + "px";
	},

	subSubNavOver: function(id, subId, subSubId) {
		if(this.activeNav == id) {
			clearTimeout(this.timer);
		}
		this.setTransparency("on", id, subId, subSubId);
	},

	subSubNavOut: function(id, subId, subSubId) {
		this.timer = setTimeout("Nav.hideNav("+id+")", this.timeOutIntervall);
		this.setTransparency("off", id, subId, subSubId);
	},
	
	setTransparency: function(flag, id, subId, subSubId) {
		//var alpha = (flag == "on") ? 1.0 : this.transparencyLevel;
		var alpha = (flag == "on") ? this.transparencyLevel : 0.9;
		
		var elementId;
		if(subSubId != null) {
			elementId = "subSubNavPoint_" + id + "_" + subId + "_" + subSubId;
		} else if(subId != null) {
			elementId = "subNavPoint_" + id + "_" + subId;
		} else {
			elementId = "subNavFill_" + id;
		}
		var element = $(elementId);
		
		if(element != null) {
			new Effect.Opacity(element, {duration:0, to:alpha});
		}
	},
	
	getElementId: function(id) {
		var elementId = "subNav_" + id;
		return elementId;
	}
}

var Misc = {
	lastGalleryClassName: '',	

	classNameForActiveInput: 'formInputActive',
	
	classNameForNonActiveInput: 'formInput',
	
	classNameForActiveInputButton: 'formButtonOn',
	
	classNameForNonActiveInputButton: 'formButtonOff',

	init: function() {
	
	},
	
	onFocus: function(element) {
		element.parentNode.className = this.classNameForActiveInput;
	},
	
	onBlur: function(element) {
		element.parentNode.className = this.classNameForNonActiveInput;
	},
	
	onOver: function(element) {
		element.className = this.classNameForActiveInputButton;
	},
	
	onOut: function(element) {
		element.className = this.classNameForNonActiveInputButton;
	},
	
	formReset: function() {
		var theForm = document.forms[0];
		if(theForm != null) {
			var elements = theForm.elements;
			
			for(var i = 0 ; i < elements.length ; i++){
				if(elements[i].type != 'submit' && elements[i].type != 'reset') {
					elements[i].value = "";
				}
			}
		}
		return false;
	},
	
	peopleOver: function(element) {
		element.className = "galleryOver";
	},
	
	peopleOut: function(element) {
		element.className = "gallery";
	},
	
	galleryOver: function(element) {
		this.lastGalleryClassName = element.className;
		element.className += " galleryOver";
	},
	
	galleryOut: function(element) {
		element.className = this.lastGalleryClassName;
	}
}


/**
 * Comm
 * 
 * Handles the communication with other entities.
 * e.g. flash
 * 
 * @author Henrik Niklaus <henrik@nikolausohneo.de>
 * @copyright  © 2007 by rionord.de
 */
var Comm = {
	flashMovie: null,
	
	flashId: null,
	
	init: function() {
		this.flashId = "karte";
		this.flashMovie = $(this.flashId);
	},
	
	setSender: function(name) {
		this.flashMovie.setSender(name);
	},
	
	send: function() {
		this.flashMovie.send();
	}
}


function init() {
	Debug.init();
	Browser.init();
	Nav.init(section);
	//Comm.init();
	//Map.init();
	//this solves the initialization-problem with firefox ($A is undefined in prototype.js)
	Event.observe(window, 'unload', Event.unloadCache, false);
	if (oldOnload)
		oldOnload();
}

var oldOnload = window.onload;
window.onload = init;


