Element.implement({
		getHeight : function() {
				return this.getSize().y;
		},
		getWidth : function() {
				return this.getSize().x;
		},
		hide: function() {
				return this.addClass('hide');
		},
		show: function() {
				return this.removeClass('hide');
		},
		fadeIn : function(duration, callback) {
				var self = this;
				this.setStyle('opacity', 0);
				this.set('tween',{
						'duration' : duration,
						'onComplete': function() {
								if(callback) callback.attempt(false, self);
						}
				}).tween('opacity', 1);
		},
		fadeOut : function(duration, callback) {
				var self = this;
				this.set('tween',{
						'duration' : duration,
						'onComplete': function() {
								if(callback) callback.attempt(false, self);
						}
				}).tween('opacity', 0);
				return this;
		},
		slideIn : function(duration, callback) {

				if(!duration) duration = 300;
				if(!callback) callback = function() {}; 
				
				this.removeClass('hide');
				var h = this.getHeight();
				var o = this.getStyle('overflow');
				this.addClass('hide');

				this.setStyle('height', 0)
						.setStyle('overflow', 'hidden')
						.removeClass('hide')
						.set('tween', {
								duration : duration,
								onComplete : function() {
										this.setStyle('overflow', o);
										callback.attempt();
								}.bind(this)
						}).tween('height', h);
		
		},
		slideOut : function(duration, callback) {

				if(!duration) duration = 300;
				if(!callback) callback = function() {}; 

				var h = this.getHeight();
				var o = this.getStyle('overflow');
				
				this.setStyle('overflow', 'hidden')
						.set('tween', {
								duration : duration,
								onComplete : function() {
										this.setStyle('overflow', o).addClass('hide').setStyle('height', h);
										callback.attempt();
								}.bind(this)
						}).tween('height', 0);
		
		},
		isParent : function(element) {
				t = this; element = $(element);
				while(t.getParent()) { 
					if(t==element) return true;
					t=t.getParent(); 
				} return false;
		}
});

var ie = (Browser.Engine.trident && Browser.Engine.version < 5) ? true : false; 

window.addEvent('domready', function() {

		var view = $('background').get('rel');
		loadBackground(-1, view);        
					
		if(ie) return true;
		
    $('toggle').addEvent('click', function() {
				hideContent();
    });

		$('logo').addEvent('click', function() {

				if($('content').hasClass('invisible')) {
						showContent();				
						return false;
				}
		
		});
    
    $('to-top').addEvent('click', function() {
        new Fx.Scroll(window).toTop();
        return false;
    });

		$('background-image').addEvent('click', function() {
				if($('content').hasClass('invisible')) {
						showContent();				
				} else {
						hideContent();
				}
		});

		$('page').addEvent('click', function(e) {

				if(e.target.isParent('content') || e.target.isParent('top')) return true;

				if($('content').hasClass('invisible')) {
						showContent();				
				} else {
						hideContent();
				}
		});

    		        
});

function loadBackground(page, view) {

    new Request.JSON({
    		url : '/background.php',
    		onComplete : function(r) {

						$('info').empty();

						$('background-image').setStyles({
								'opacity' : 0,
								'background-image' : 'url(' + r.image + ')',
								'height' : r.height
						});

						var html = '<a href="#previous" onclick="loadBackground(\'' + r.prev + '\',\'' + view + '\'); return false" class="previous">zur&uuml;ck</a>';
						if(r.info.caption) {
								html += '<p class="description">' + r.info.caption + '</p>';
								html += '<p class="caption">' + r.info.year + ' | <a target="_blank" href="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=' + r.info.location + '&ie=UTF8&hq=&hnear=' + encodeURIComponent(r.info.location) + '&z=12">' + r.info.location + '</a></p>';
						}					
						html += '<a href="#next" onclick="loadBackground(\'' + r.next + '\',\'' + view + '\'); return false" class="next">vor</a>';
						
						$('info').set('html', html);
																				
						new Asset.image(r.image, {
								onload : function() {
										if(ie) {
											$('background-image').setStyle('opacity', 1);
										} else {
											$('background-image').fadeIn(300);										
										}
										$('background').setStyle('height', 'auto');
								}						
						});
						    		
    		}
    }).get({'page' : page, 'view' : view});
}

function showContent() {

		$('top').removeClass('hide');

		$('info').set('tween', {duration: 150}).tween('bottom', -50);

		$('content').slideIn(300, function() {

				$('impressum').removeClass('hide');

				$('content').removeClass('invisible');        
				$('top').removeClass('hide');
				$('toggle').removeClass('off');
		});

		$(document.body).addClass('fix');
		
}

function hideContent() {

		$('impressum').addClass('hide');

		$('content').fadeOut(100).slideOut(300, function() {

				$('content').addClass('invisible');        
				$('toggle').addClass('off');
				$('top').addClass('hide');
				$(document.body).removeClass('fix');
				
				$('info').setStyle('bottom', -50).set('tween', {duration: 150}).tween('bottom', 0);

		});

}