// JavaScript Document
var ui = {
	init: function () {
		ui.initShutter();
		ui.initProjectHover();
	},
	initShutter: function () {	
		var shutters = $A(document.getElementsByClassName('shutterframe'));
		if(shutters.length > 0) {
			shutters.each(function(shutter) {
				var shutterID = shutter.id;
				ui.createShutter(shutterID);
				Event.observe(shutterID, 'click', function(e){
					if(document.location.href.match(/pos/)) {
						document.location.href = '?pos=0';
					}
				});
				Event.observe(shutterID, 'mouseover', function(e){
					if(document.location.href.match(/pos/)) {
						$(shutterID).style.cursor = 'pointer';
					}
				});	
				Event.observe(shutterID, 'mouseout', function(e){
					if(document.location.href.match(/pos/)) {
						$(shutterID).style.cursor = 'default';
					}
				});					
			});
			ui.moveShutter();
		}
	},
	createShutter: function (elem) {
		var left = document.createElement("div");
		left.id = "shutterLeft";
		left.className = "shutterLeft";		
		
		var right = document.createElement("div");
		right.id = "shutterRight";
		right.className = "shutterRight";
		
		$(elem).appendChild(left);
		$(elem).appendChild(right);
		$(elem).style.display = 'block';
	},
	moveShutter: function () {
		new Effect.Morph('shutterLeft',{
		  style:{
			left:'-250px'
		  },
		  duration: 0.7,
		  afterFinish: function() { ui.removeShutter('shutterLeft'); }
		});		
		new Effect.Morph('shutterRight',{
		  style:{
			left:'501px'
		  },
		  duration: 0.7,
		  afterFinish: function() { ui.removeShutter('shutterRight'); }
		});	
	},
	removeShutter: function(element) {
		var element = document.getElementById(element);
		element.parentNode.removeChild(element);
	},
	initProjectHover: function () {
		/* Eventhandler installieren in "mehr projekte", "galerie", "bilder" */
		var projects = $A(document.getElementsByClassName('moreProjects'));
		var images = $A(document.getElementsByClassName('galerieBox'));
		if(projects.length > 0 && images.length > 0) {
				projects.each(function(project) {
				var elem = project.id;  
				Event.observe(elem, 'mouseover', function(e){
					var pos = elem.split("_");
					ui.hoverProject(pos[1], 1);	
				});
				Event.observe(elem, 'mouseout', function(e){
					var pos = elem.split("_");
					ui.hoverProject(pos[1], 0);	
				});		
			});
			images.each(function(image) {
				var elem = image.id;  
				Event.observe(elem, 'mouseover', function(e){
					var pos = elem.split("_");
					ui.hoverProject(pos[1], 1);				  
				});
				Event.observe(elem, 'mouseout', function(e){
					var pos = elem.split("_");
					ui.hoverProject(pos[1], 0);	
				});	
				Event.observe(elem, 'click', function(e){
					var pos = elem.split("_");
					document.location.href = '?pos='+pos[1];	
				});	
			});			
		}
	},
	hoverProject: function(pos, state) {
		if(state == 1) {
			$('moreProjectChar_'+pos).className = 'active';
			$('moreProjectNum_'+pos).className = 'active';
			ui.swapColor('image_'+pos, state);
		} else {
			$('moreProjectChar_'+pos).className = 'moreProjects';
			$('moreProjectNum_'+pos).className = 'moreProjects';
			ui.swapColor('image_'+pos, state);
		}
	},
	swapColor: function (elem, state) {
		if(state == 1) {
			$(elem).src = $(elem).src.replace(/_bw/, "_color");
			$(elem).style.cursor = 'pointer';
		} else {
			$(elem).src = $(elem).src.replace(/_color/, "_bw");
			$(elem).style.cursor = 'default';
		}
	},
	hoverLogo: function () {
		Event.observe('logoImage', 'mouseover', function(e){
			var overlay = document.createElement("div");
			overlay.id = "address_overlay";
			var content = $('overlay_content').innerHTML;
			overlay.innerHTML = '<div style="position: relative;">'+content+'</div>';
			$('fifthRow').appendChild(overlay);
			/*Effect.Appear('address_overlay', {duration: 0.2});*/
		});	
		Event.observe('logoImage', 'mouseout', function(e){
			/*Effect.Fade('address_overlay', {duration: 0.2, afterFinish: function() { ui.removeShutter('address_overlay'); }});*/
			ui.removeShutter('address_overlay');
		});			
	},
	hoverLogoHome: function () {
		Event.observe('logoImage', 'mouseover', function(e){
			$('intro').style.display = 'none';
			var overlay = document.createElement("div");
			overlay.id = "address_overlay";
			var content = $('overlay_content').innerHTML;
			overlay.innerHTML = '<div style="position: relative;">'+content+'</div>';
			$('fifthRow').appendChild(overlay);
			/*Effect.Appear('address_overlay', {duration: 0.2});*/
		});	
		Event.observe('logoImage', 'mouseout', function(e){
			$('intro').style.display = 'block';
			/*Effect.Fade('address_overlay', {duration: 0.2, afterFinish: function() { ui.removeShutter('address_overlay'); }});*/
			ui.removeShutter('address_overlay');
		});			
	},	
	yearsHover: function (image) {
		$('image_left').style.backgroundImage = 'url(/uploaded_files/page_history/'+image+')';
		$('image_left').className = 'innerLeft shutterframe';
		ui.initShutter();
	},
	highlightCity: function (city) {
		$('karte').src = '/img/map/'+city+'.gif';	
	}	
}